/*
 * The redesigned interior pages (behind SiteSetting::websitePagesV2Enabled()).
 * Loaded only through site.pages-v2.partials.chrome, which also puts
 * `pages-v2-body` on the body: every rule here is scoped under it, every class
 * is the board's with a `pg-` prefix (BEM kept, `.on` → `.is-active`), and
 * colours come from site.css's tokens (the board's --b700 is --blue-700 and so
 * on). Authority: the boards in docs/mockups/website-pages/ (blocks "interior
 * masthead", "sub navigation", "filter chips" and the shared home CSS).
 *
 * Navy bands stay navy in both themes; gold is decorative only. Motion lives
 * in the prefers-reduced-motion: no-preference block only.
 */

/* ============================ TOKENS ================================== */
body.pages-v2-body {
  --pg-ease: cubic-bezier(.2, .7, .2, 1);
  --pg-wrap: 1360px;
  --pg-gutter: 40px;
  /* Blue-700 text and bars on theme-following surfaces, lifted to the site's
     dark accent in dark mode, where #1E427A vanishes on --bg (as site-home.css). */
  --pg-ink: var(--blue-700);
  /* The sticky masthead's real height (inner 88 + its 1px border; 72 + 1
     under 760) and the sub-nav's (66 + 1; 56 + 1): the sub-nav sticks below
     the masthead, and a section jumped to clears both. */
  --pg-mast-h: 89px;
  --pg-subnav-h: 67px;
}
[data-theme="dark"] body.pages-v2-body { --pg-ink: var(--accent); }

/* ============================ LAYOUT ================================== */
body.pages-v2-body .pg-wrap {
  max-width: var(--pg-wrap); margin-inline: auto; padding-inline: var(--pg-gutter);
  width: 100%; position: relative;
}
body.pages-v2-body .tnum { font-variant-numeric: tabular-nums; }

/* ============================ FOCUS ON NAVY =========================== */
/* site.css's --focus-ring is a translucent blue, about 1.2:1 on navy: on the
   navy-in-both-themes surfaces the ring is gold instead (#CFB16F on #0E2547
   is 7.4:1; 3.65:1 on the lightest navy, #2E5490, in the app band's glow).
   Each focusable here sits inside its surface, so the ring lands on navy.
   Light surfaces keep site.css's ring. */
body.pages-v2-body :is(.masthead, .pg-band, .pg-pv__stage, .pg-vplayer__media, .pg-soct, .pg-appcta, .pg-tk__now) :focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px;
}

/* ============================ MASTHEAD ================================ */
/* The layout's own header, markup and behaviour unchanged (still sticky as
   site.css draws it), drawn as the board's interior masthead: solid navy in
   both themes. Twin of site-home.css:366 (the home's navy state) minus its
   `position: absolute` and transparent background. Duplicated on purpose:
   the only stylesheet both pages load is site.css, which stays closed, and
   moving the rules out of site-home.css would edit the live home's sheet. */
body.pages-v2-body .masthead {
  background: var(--blue-900); color: var(--on-hero);
  border: 0; border-bottom: 1px solid rgba(255, 255, 255, .1);
}
body.pages-v2-body .masthead__inner {
  max-width: var(--pg-wrap); padding: 0 40px; height: 88px; position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
body.pages-v2-body .brand { padding: 0; }
body.pages-v2-body .brand__logo { height: 48px; width: auto; filter: brightness(0) invert(1); }
body.pages-v2-body .nav { gap: 30px; flex-wrap: nowrap; }
body.pages-v2-body .nav__link,
body.pages-v2-body .nav__link:hover,
body.pages-v2-body .nav__link.is-active {
  position: relative; padding: 6px 0; border: 0;
  font-size: 15px; font-weight: 500; letter-spacing: normal; color: var(--on-hero);
}
body.pages-v2-body .nav__link.is-active::after,
body.pages-v2-body .nav__link:hover::after {
  content: ""; position: absolute; inset-inline: 0; bottom: -2px;
  height: 2px; background: var(--gold); border-radius: 2px;
}
body.pages-v2-body .masthead__actions { gap: 14px; }
body.pages-v2-body .pillbtn,
body.pages-v2-body .nav__toggle {
  height: 44px; min-width: 44px; width: auto; padding-inline: 12px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06);
  color: var(--on-hero); font-size: 14px; font-weight: 600;
}
body.pages-v2-body .pillbtn:hover,
body.pages-v2-body .nav__toggle:hover {
  background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .36); color: #fff;
}
body.pages-v2-body .pillbtn .i,
body.pages-v2-body .nav__toggle .i { width: 20px; height: 20px; }

/* Laptops: nine links and the toggles stop fitting at the board's spacing. */
@media (max-width: 1180px) {
  body.pages-v2-body .masthead__inner { gap: 16px; }
  body.pages-v2-body .nav { gap: 18px; }
  body.pages-v2-body .nav__link { font-size: 14.5px; }
  /* site.css drops the language pill to its flag here; the board keeps its
     label until the phone header (760). */
  body.pages-v2-body .pillbtn__label { display: inline; }
}
/* site.css collapses the nav behind the burger here; the open nav becomes the
   board's navy panel under the header instead of a row inside it. */
@media (max-width: 820px) {
  body.pages-v2-body .nav.is-open {
    /* Right under the header row, whatever its height (88, or 72 under 760). */
    position: absolute; top: 100%; inset-inline: 18px; z-index: 1;
    display: flex; flex-direction: column; align-items: stretch; gap: 4px;
    padding: 16px; background: var(--blue-900); border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .4);
  }
  body.pages-v2-body .nav__link,
  body.pages-v2-body .nav__link:hover,
  body.pages-v2-body .nav__link.is-active { padding: 12px; }
  body.pages-v2-body .nav__link + .nav__link { border-top: 1px solid rgba(255, 255, 255, .1); }
  body.pages-v2-body .nav__link.is-active { color: var(--gold); }
  body.pages-v2-body .nav__link.is-active::after,
  body.pages-v2-body .nav__link:hover::after { content: none; }
}

/* ============================ TYPE & LINKS ============================ */
body.pages-v2-body .pg-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--pg-ink);
}
body.pages-v2-body .pg-eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--pg-ink); border-radius: 2px; }
body.pages-v2-body .pg-h2 { margin: 0; font-size: 44px; line-height: 1.02; font-weight: 700; letter-spacing: -.02em; text-wrap: balance; }
body.pages-v2-body .pg-sub { margin: 0; color: var(--text-muted); font-size: 17px; max-width: 56ch; }
body.pages-v2-body .pg-more,
body.pages-v2-body .pg-more:hover {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-size: 15px; font-weight: 700; color: var(--pg-ink);
  border-bottom: 2px solid var(--blue-100); padding-bottom: 2px;
}
body.pages-v2-body .pg-pill {
  display: inline-flex; align-items: center; gap: 8px; width: max-content;
  border-radius: 999px; padding: 6px 12px;
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
body.pages-v2-body .pg-pill--gold { background: var(--gold); color: var(--blue-900); }
body.pages-v2-body .pg-pill--soft { background: var(--surface-2); color: var(--pg-ink); }
body.pages-v2-body .pg-pill--onhero { background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid rgba(255, 255, 255, .24); }

/* ============================ BUTTONS ================================= */
body.pages-v2-body .pg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 24px; border-radius: 14px; border: 1px solid transparent;
  font-family: inherit; font-size: 15px; font-weight: 700; white-space: nowrap; cursor: pointer;
}
body.pages-v2-body .pg-btn--primary,
body.pages-v2-body .pg-btn--primary:hover { background: var(--blue-700); color: var(--on-primary); box-shadow: 0 10px 24px rgba(30, 66, 122, .28); }
/* On navy: translucent white. */
body.pages-v2-body .pg-btn--ghost,
body.pages-v2-body .pg-btn--ghost:hover {
  background: rgba(255, 255, 255, .08); color: var(--on-hero);
  border-color: rgba(255, 255, 255, .22); backdrop-filter: blur(8px);
}
/* On navy: white stays white in both themes. */
body.pages-v2-body .pg-btn--white,
body.pages-v2-body .pg-btn--white:hover { background: #fff; color: var(--blue-900); }

/* ============================ SECTIONS ================================ */
body.pages-v2-body .pg-sec { padding-block: 96px; position: relative; }
body.pages-v2-body .pg-sec--t { padding-top: 56px; }
body.pages-v2-body .pg-sec__head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  margin-bottom: 40px; position: relative;
}
body.pages-v2-body .pg-sec__head > div { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
/* A one-line intro under a section head (the Fans tickets panel): 18 px
   muted, like .pg-get__text p and the Club values intro. */
body.pages-v2-body .pg-sec__intro { margin: -16px 0 32px; color: var(--text-muted); font-size: 18px; max-width: 62ch; }

/* ============================ TITLE BAND ============================== */
/* The board's compact navy page header (.mast/.phead). Navy in both themes. */
body.pages-v2-body .pg-band {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--blue-900); color: var(--on-hero);
}
body.pages-v2-body .pg-band__glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(900px 420px at 0% 100%, rgba(46, 84, 144, .55), transparent 70%);
}
[dir="rtl"] body.pages-v2-body .pg-band__glow {
  background: radial-gradient(900px 420px at 100% 100%, rgba(46, 84, 144, .55), transparent 70%);
}
/* The fanar line lattice at the inline end, dark on navy (board .mast__line).
   The board's fill layer is black under `screen`, so it draws nothing and is
   not carried over. */
body.pages-v2-body .pg-band__line {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .32;
  background: url("../images/brand/pattern-fanar-line-right.svg") 108% 60% / 760px no-repeat;
}
[dir="rtl"] body.pages-v2-body .pg-band__line { transform: scaleX(-1); }
body.pages-v2-body .pg-band__ghost {
  position: absolute; z-index: 1; bottom: -46px; inset-inline-end: -12px;
  font-size: 220px; line-height: 1; font-weight: 700; letter-spacing: -.04em; text-transform: uppercase;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .09);
  pointer-events: none; user-select: none; white-space: nowrap;
}
body.pages-v2-body .pg-band__in {
  z-index: 2; padding-block: 44px 76px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
}
body.pages-v2-body .pg-band .pg-eyebrow { color: var(--gold); }
body.pages-v2-body .pg-band .pg-eyebrow::before { background: var(--gold); }
body.pages-v2-body .pg-band__title {
  margin: 0; max-width: 15ch; text-wrap: balance;
  font-size: 84px; line-height: .94; font-weight: 700; letter-spacing: -.03em; text-transform: uppercase;
}
body.pages-v2-body .pg-band__title.is-long {
  max-width: 24ch; font-size: 52px; line-height: 1.06; letter-spacing: -.02em; text-transform: none;
}
body.pages-v2-body .pg-band__sub { margin: 0; color: var(--on-hero-muted); font-size: 18px; max-width: 58ch; }
body.pages-v2-body .pg-band__meta {
  display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center;
  color: var(--on-hero-muted); font-size: 14px;
}
body.pages-v2-body .pg-band__meta .pg-pill { text-transform: none; letter-spacing: normal; font-size: 13px; font-weight: 600; }

/* Crumbs: the dots are pseudo-elements between items, so RTL mirrors them
   with the list and no separator glyph needs flipping. */
body.pages-v2-body .pg-crumbs {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin: 0; padding: 0; list-style: none;
  font-size: 13px; font-weight: 500; color: var(--on-hero-muted);
}
body.pages-v2-body .pg-crumbs li { display: inline-flex; align-items: center; gap: 10px; }
body.pages-v2-body .pg-crumbs li + li::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: var(--on-hero-muted); opacity: .6;
}
body.pages-v2-body .pg-crumbs a { color: inherit; }
body.pages-v2-body .pg-crumbs a:hover { color: #fff; }
body.pages-v2-body .pg-crumbs [aria-current] { color: #fff; }

body.pages-v2-body .pg-back,
body.pages-v2-body .pg-back:hover {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding-inline: 14px 18px;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06);
  font-size: 14px; font-weight: 700; color: #fff;
}
body.pages-v2-body .pg-back:hover { background: rgba(255, 255, 255, .14); }

/* ============================ SUB NAVIGATION ========================== */
/* Today's ?tab= links as one bar: anchors into one page from 960 up (sticky
   at the top), tabs below 960 (site-pages.js). */
body.pages-v2-body .pg-subnav {
  position: relative; z-index: 3;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
body.pages-v2-body .pg-subnav__in { display: flex; gap: 34px; overflow-x: auto; scrollbar-width: none; }
body.pages-v2-body .pg-subnav__in::-webkit-scrollbar { display: none; }
body.pages-v2-body .pg-subnav__link,
body.pages-v2-body .pg-subnav__link:hover {
  display: inline-flex; align-items: center; height: 66px; margin-bottom: -1px; white-space: nowrap;
  font-size: 15px; font-weight: 700; color: var(--text-muted);
  border-bottom: 3px solid transparent;
}
body.pages-v2-body .pg-subnav__link:hover { color: var(--pg-ink); }
body.pages-v2-body .pg-subnav__link.is-active { color: var(--pg-ink); border-color: var(--pg-ink); }
/* A section the bar jumps to clears the stuck masthead and bar. */
body.pages-v2-body [data-pg-panel] { scroll-margin-top: calc(var(--pg-mast-h) + var(--pg-subnav-h)); }
@media (min-width: 960px) {
  body.pages-v2-body .pg-subnav { position: sticky; top: var(--pg-mast-h); z-index: 20; }
}
/* The tabs (ruling 4): under 960 only the current section shows. */
@media (max-width: 959px) {
  body.pages-v2-body .pg-tabbed [data-pg-panel]:not(.is-current) { display: none; }
}

/* ============================ FILTER CHIPS ============================ */
body.pages-v2-body .pg-chips { display: flex; flex-wrap: wrap; gap: 10px; }
body.pages-v2-body .pg-chip,
body.pages-v2-body .pg-chip:hover {
  display: inline-flex; align-items: center; height: 44px; padding: 0 18px; white-space: nowrap;
  border-radius: 999px; border: 1px solid var(--border); background: var(--surface);
  font-size: 14px; font-weight: 700; color: var(--pg-ink);
}
body.pages-v2-body .pg-chip:hover { box-shadow: var(--shadow-raised); }
body.pages-v2-body .pg-chip.is-active,
body.pages-v2-body .pg-chip.is-active:hover { background: var(--blue-700); border-color: var(--blue-700); color: #fff; }

/* ============================ PAGER =================================== */
body.pages-v2-body .pg-pager { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 48px; }
body.pages-v2-body .pg-pager__btn,
body.pages-v2-body .pg-pager__btn:hover {
  width: 56px; height: 56px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--border); color: var(--pg-ink);
  box-shadow: var(--shadow-raised);
}
body.pages-v2-body .pg-pager__btn[aria-disabled="true"] { opacity: .4; box-shadow: none; }
body.pages-v2-body .pg-pager__btn .i { width: 24px; height: 24px; }
body.pages-v2-body .pg-pager__n { font-size: 15px; font-weight: 700; color: var(--text-muted); letter-spacing: .1em; }
body.pages-v2-body .pg-pager__n b { color: var(--text); font-size: 22px; letter-spacing: 0; }

/* ============================ MOTION ================================== */
@media (prefers-reduced-motion: no-preference) {
  body.pages-v2-body .pg-btn,
  body.pages-v2-body .pg-pager__btn { transition: transform .25s var(--pg-ease), box-shadow .25s var(--pg-ease); }
  body.pages-v2-body .pg-btn:hover { transform: translateY(-2px); }
  body.pages-v2-body a.pg-pager__btn:hover { transform: scale(1.06); }
  body.pages-v2-body .pg-chip { transition: box-shadow .25s var(--pg-ease); }
  body.pages-v2-body .pg-subnav__link { transition: color .2s var(--pg-ease), border-color .2s var(--pg-ease); }
}

/* ============================ ARABIC ================================== */
/* Arabic has no capitals, and tracking breaks its joins. */
[dir="rtl"] body.pages-v2-body .pg-eyebrow,
[dir="rtl"] body.pages-v2-body .pg-pill,
[dir="rtl"] body.pages-v2-body .pg-h2,
[dir="rtl"] body.pages-v2-body .pg-band__ghost,
[dir="rtl"] body.pages-v2-body .pg-band__title { letter-spacing: 0; }
[dir="rtl"] body.pages-v2-body .pg-band__title { font-size: 72px; line-height: 1.08; }
[dir="rtl"] body.pages-v2-body .pg-band__title.is-long { font-size: 44px; line-height: 1.3; }

/* ============================ PHONE =================================== */
@media (max-width: 760px) {
  body.pages-v2-body { --pg-gutter: 16px; --pg-mast-h: 73px; --pg-subnav-h: 57px; }

  body.pages-v2-body .masthead__inner { height: 72px; padding: 0 16px; }
  body.pages-v2-body .brand__logo { height: 40px; }
  body.pages-v2-body .pillbtn__label { display: none; }

  body.pages-v2-body .pg-h2 { font-size: 34px; }
  body.pages-v2-body .pg-sec { padding-block: 64px; }
  body.pages-v2-body .pg-sec--t { padding-top: 36px; }
  body.pages-v2-body .pg-sec__head { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 28px; }
  body.pages-v2-body .pg-sec__intro { margin: -8px 0 24px; }

  body.pages-v2-body .pg-band__ghost { font-size: 96px; bottom: -20px; }
  body.pages-v2-body .pg-band__in { padding-block: 28px 48px; gap: 14px; }
  body.pages-v2-body .pg-band__title { font-size: 46px; }
  [dir="rtl"] body.pages-v2-body .pg-band__title { font-size: 40px; }
  body.pages-v2-body .pg-band__title.is-long,
  [dir="rtl"] body.pages-v2-body .pg-band__title.is-long { font-size: 30px; }
  body.pages-v2-body .pg-band__sub { font-size: 16px; }

  body.pages-v2-body .pg-subnav__in { gap: 24px; }
  body.pages-v2-body .pg-subnav__link { height: 56px; font-size: 14px; }

  body.pages-v2-body .pg-chips {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin-inline: calc(var(--pg-gutter) * -1); padding-inline: var(--pg-gutter);
  }
  body.pages-v2-body .pg-chips::-webkit-scrollbar { display: none; }

  body.pages-v2-body .pg-pager { margin-top: 32px; }
}

/* ============================ NEWS LIST =============================== */
/* Board blocks "newsroom" and "news cards" (N1-N3). Page 1: the first story
   large beside "Latest", then the grid of the rest (.pg-ngrid--lead);
   pages 2+: the plain grid. */
body.pages-v2-body .pg-news-page .pg-chips + * { margin-top: 32px; }
body.pages-v2-body .pg-news { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 28px; }
body.pages-v2-body .pg-news + .pg-ngrid { margin-top: 28px; }

body.pages-v2-body .pg-feat,
body.pages-v2-body .pg-feat:hover {
  position: relative; border-radius: 26px; overflow: hidden; isolation: isolate; min-height: 620px;
  display: flex; align-items: flex-end; color: #fff; box-shadow: var(--shadow-hero);
}
body.pages-v2-body .pg-feat__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
body.pages-v2-body .pg-feat::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(14, 37, 71, 0) 30%, rgba(14, 37, 71, .55) 65%, rgba(14, 37, 71, .96) 100%);
}
/* No image: navy with the fanar fill, in both themes. */
body.pages-v2-body .pg-feat--plain { background: var(--blue-800); }
body.pages-v2-body .pg-feat__pat {
  position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background: url("../images/brand/pattern-fanar-fill-full.svg") center / cover no-repeat;
}
/* The only story on the page: nothing beside it, so it takes the row. */
body.pages-v2-body .pg-feat--solo { grid-column: 1 / -1; }
body.pages-v2-body .pg-feat__body { position: relative; z-index: 1; padding: 40px; display: flex; flex-direction: column; gap: 16px; max-width: 680px; }
body.pages-v2-body .pg-feat .pg-pill { margin-bottom: 2px; }
body.pages-v2-body .pg-feat__date {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  font-size: 13px; color: var(--on-hero-muted); letter-spacing: .08em; text-transform: uppercase;
}
/* On navy the category is white, not the ink blue. */
body.pages-v2-body .pg-feat__date b { color: #fff; letter-spacing: .1em; }
body.pages-v2-body .pg-feat__title { margin: 0; font-size: 38px; line-height: 1.05; font-weight: 700; letter-spacing: -.02em; text-wrap: balance; color: #fff; }
body.pages-v2-body .pg-feat p { margin: 0; color: var(--on-hero-muted); font-size: 16px; max-width: 58ch; }
/* On navy: white stays white in both themes. */
body.pages-v2-body .pg-feat .pg-more { align-self: flex-start; color: #fff; border-color: rgba(255, 255, 255, .3); }

body.pages-v2-body .pg-nlist {
  display: flex; flex-direction: column; background: var(--surface);
  border-radius: 26px; box-shadow: var(--shadow-raised); padding: 10px 28px;
}
body.pages-v2-body .pg-nlist__lab { margin: 0; padding: 20px 0 4px; }
body.pages-v2-body .pg-nitem,
body.pages-v2-body .pg-nitem:hover {
  display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 20px; align-items: center;
  padding: 22px 0; border-top: 1px solid var(--border); color: var(--text);
}
body.pages-v2-body .pg-nitem__thumb { position: relative; width: 120px; height: 90px; border-radius: 14px; overflow: hidden; background: var(--surface-2); }
body.pages-v2-body .pg-nitem__thumb > img { display: block; width: 100%; height: 100%; object-fit: cover; }
body.pages-v2-body .pg-nitem__thumb .pg-nophoto img { width: 28px; height: 28px; }
body.pages-v2-body .pg-nlist__lab + .pg-nitem { border-top: 0; }
body.pages-v2-body .pg-nitem__d,
body.pages-v2-body .pg-ncard__d {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  font-size: 12px; color: var(--text-muted); letter-spacing: .08em; text-transform: uppercase;
}
body.pages-v2-body .pg-nitem__d b,
body.pages-v2-body .pg-ncard__d b { color: var(--pg-ink); letter-spacing: .1em; }
body.pages-v2-body .pg-nitem h3 { margin: 6px 0 0; font-size: 19px; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; }
body.pages-v2-body .pg-nitem:hover h3 { color: var(--pg-ink); }

body.pages-v2-body .pg-ngrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)); gap: 24px; }
/* Page 1's grid holds up to four: the board's two-wide lead row, and two
   or four stories split evenly rather than leaving a hole. Under 961 it is
   the plain grid. */
@media (min-width: 961px) {
  body.pages-v2-body .pg-ngrid--lead { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  body.pages-v2-body .pg-ngrid--lead > * { grid-column: span 2; }
  body.pages-v2-body .pg-ngrid--lead > :nth-child(-n+2),
  body.pages-v2-body .pg-ngrid--lead > :first-child:nth-last-child(4) ~ * { grid-column: span 3; }
  body.pages-v2-body .pg-ngrid--lead > :first-child:nth-last-child(3),
  body.pages-v2-body .pg-ngrid--lead > :first-child:nth-last-child(3) ~ * { grid-column: span 2; }
}

body.pages-v2-body .pg-ncard,
body.pages-v2-body .pg-ncard:hover {
  display: flex; flex-direction: column; background: var(--surface); color: var(--text);
  border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-raised);
}
body.pages-v2-body .pg-ncard__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-2); }
body.pages-v2-body .pg-ncard__media > img { display: block; width: 100%; height: 100%; object-fit: cover; }
body.pages-v2-body .pg-ncard__body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
body.pages-v2-body .pg-ncard h3 {
  margin: 0; font-size: 20px; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; text-wrap: pretty;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
body.pages-v2-body .pg-ncard p {
  margin: 0; color: var(--text-muted); font-size: 15px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
body.pages-v2-body .pg-ncard .pg-more { margin-top: auto; align-self: flex-start; }
body.pages-v2-body .pg-more .i { width: 18px; height: 18px; flex: none; }

/* A story with no photo: navy with the fanar fill and the frond, both themes. */
body.pages-v2-body .pg-nophoto {
  position: absolute; inset: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(420px 260px at 20% 0%, #2E5490, transparent 70%), linear-gradient(135deg, #143257, #0E2547);
}
body.pages-v2-body .pg-nophoto::before {
  content: ""; position: absolute; inset: 0; opacity: .14; mix-blend-mode: screen;
  background: url("../images/brand/pattern-fanar-fill-full.svg") center / 420px repeat;
}
body.pages-v2-body .pg-nophoto img { position: relative; width: 56px; height: 56px; opacity: .5; filter: brightness(0) invert(1); }

body.pages-v2-body .pg-empty { margin: 32px 0 0; padding: 48px 24px; text-align: center; color: var(--text-muted); font-size: 15px; }

@media (prefers-reduced-motion: no-preference) {
  body.pages-v2-body .pg-feat__img { transition: transform 1.2s var(--pg-ease); }
  body.pages-v2-body .pg-feat:hover .pg-feat__img,
  body.pages-v2-body .pg-feat:focus-visible .pg-feat__img { transform: scale(1.04); }
  body.pages-v2-body .pg-ncard { transition: transform .35s var(--pg-ease), box-shadow .35s var(--pg-ease); }
  body.pages-v2-body .pg-ncard:hover { transform: translateY(-4px); box-shadow: var(--shadow-hero); }
  body.pages-v2-body .pg-ncard__media > img { transition: transform 1s var(--pg-ease); }
  body.pages-v2-body .pg-ncard:hover .pg-ncard__media > img { transform: scale(1.05); }
  body.pages-v2-body .pg-nitem h3 { transition: color .2s var(--pg-ease); }
}

[dir="rtl"] body.pages-v2-body .pg-feat__date,
[dir="rtl"] body.pages-v2-body .pg-feat__date b,
[dir="rtl"] body.pages-v2-body .pg-feat__title,
[dir="rtl"] body.pages-v2-body .pg-nitem__d,
[dir="rtl"] body.pages-v2-body .pg-nitem__d b,
[dir="rtl"] body.pages-v2-body .pg-ncard__d,
[dir="rtl"] body.pages-v2-body .pg-ncard__d b { letter-spacing: 0; }

@media (max-width: 760px) {
  body.pages-v2-body .pg-news { grid-template-columns: 1fr; }
  body.pages-v2-body .pg-feat { min-height: 460px; }
  body.pages-v2-body .pg-feat__body { padding: 24px; }
  body.pages-v2-body .pg-feat__title { font-size: 26px; }
  body.pages-v2-body .pg-nlist { padding: 4px 18px; }
  body.pages-v2-body .pg-nitem { grid-template-columns: 90px minmax(0, 1fr); gap: 14px; padding: 16px 0; }
  body.pages-v2-body .pg-nitem__thumb { width: 90px; height: 72px; }
  body.pages-v2-body .pg-nitem h3 { font-size: 16px; }
  body.pages-v2-body .pg-ngrid { gap: 16px; }
  body.pages-v2-body .pg-ncard__body { padding: 18px; }
  body.pages-v2-body .pg-ncard h3 { font-size: 18px; }
}

/* ============================ ARTICLE ================================= */
/* Board block "revision 1 … article" (A1-A3): the title and the photo side
   by side in the navy header, one centred 820 px reading column (meta bar,
   lead, paragraphs, the navy pull quote, share row, category chips), then
   "Latest news" on a white band. */
body.pages-v2-body .pg-band--art .pg-band__ghost { bottom: -34px; }
body.pages-v2-body .pg-ahd {
  z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 600px);
  gap: 64px; align-items: end; padding-block: 40px 64px;
}
/* No photo: the text takes the row. */
body.pages-v2-body .pg-ahd--solo { grid-template-columns: minmax(0, 1fr); }
body.pages-v2-body .pg-ahd__text { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding-bottom: 8px; }
body.pages-v2-body .pg-ahd__meta {
  display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center;
  color: var(--on-hero-muted); font-size: 14px;
}
body.pages-v2-body .pg-ahd__meta a.pg-pill:hover { background: rgba(255, 255, 255, .18); color: #fff; }
body.pages-v2-body .pg-ahd__title {
  margin: 0; max-width: 28ch; color: #fff; text-wrap: balance;
  font-size: 50px; line-height: 1.08; font-weight: 700; letter-spacing: -.02em;
}
body.pages-v2-body .pg-ahd__fig {
  margin: 0; position: relative; border-radius: 26px; overflow: hidden; aspect-ratio: 4 / 3;
  background: var(--blue-800); box-shadow: 0 30px 70px rgba(0, 0, 0, .35);
}
body.pages-v2-body .pg-ahd__fig::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
body.pages-v2-body .pg-ahd__fig img { display: block; width: 100%; height: 100%; object-fit: cover; }

body.pages-v2-body .pg-abody { max-width: 820px; margin: 0 auto; padding-block: 56px 8px; }
body.pages-v2-body .pg-ameta {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding-bottom: 22px; border-bottom: 1px solid var(--border); margin-bottom: 36px;
}
body.pages-v2-body .pg-ameta__l { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 14px; color: var(--text-muted); }
body.pages-v2-body .pg-ameta__l span { color: var(--text); font-weight: 600; }
body.pages-v2-body .pg-ameta__k { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
/* With no byline the share buttons still sit at the inline end. */
body.pages-v2-body .pg-ameta__s { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
body.pages-v2-body .pg-ameta__s .pg-ameta__k { margin-inline-end: 6px; }

/* Share buttons (spec ruling 7). */
body.pages-v2-body .pg-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
body.pages-v2-body .pg-shr {
  width: 44px; height: 44px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--pg-ink);
  display: inline-flex; align-items: center; justify-content: center; font: inherit;
}
body.pages-v2-body .pg-shr:hover,
body.pages-v2-body .pg-shr.is-copied { background: var(--blue-700); border-color: var(--blue-700); color: #fff; }
body.pages-v2-body .pg-shr svg { width: 18px; height: 18px; }
/* Copy link ships hidden (it needs the script); site-pages.js unhides it. */
body.pages-v2-body .pg-shr[hidden] { display: none; }
/* No clipboard: the URL in a field, selected, to copy by hand. */
body.pages-v2-body .pg-share__field {
  flex: 1 1 220px; min-width: 0; max-width: 360px; height: 44px; padding: 0 14px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text);
  font: inherit; font-size: 14px;
}

/* The reading column. */
body.pages-v2-body .pg-prose { display: flex; flex-direction: column; gap: 22px; font-size: 18px; line-height: 1.75; color: var(--text); }
body.pages-v2-body .pg-prose p { margin: 0; }
body.pages-v2-body .pg-prose .pg-lead {
  font-size: 25px; line-height: 1.5; font-weight: 500; letter-spacing: -.01em;
  margin-bottom: 6px; text-wrap: pretty;
}
/* English only: the view adds the modifier for `en`, so Arabic never gets it. */
body.pages-v2-body .pg-lead--dropcap::first-letter {
  float: left; font-size: 92px; line-height: .8; font-weight: 700; color: var(--pg-ink); padding: 8px 14px 0 0;
}

/* The pull quote (spec ruling 6): navy in both themes, gold decoration. */
body.pages-v2-body .pg-pq {
  margin: 0; padding: 40px 48px 36px; border-radius: 26px; position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(135deg, #143257, #0E2547); color: #fff;
}
body.pages-v2-body .pg-pq::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .28;
  background: url("../images/brand/pattern-fanar-line-right.svg") 112% 50% / 440px no-repeat;
}
[dir="rtl"] body.pages-v2-body .pg-pq::before { transform: scaleX(-1); }
body.pages-v2-body .pg-pq::after {
  content: "\201C"; position: absolute; top: -6px; inset-inline-start: 30px; pointer-events: none;
  font-size: 150px; line-height: 1; font-weight: 700; color: var(--gold); opacity: .9;
}
body.pages-v2-body .pg-pq blockquote {
  margin: 0; padding-top: 46px; max-width: 38ch; text-wrap: balance;
  font-size: 30px; line-height: 1.35; font-weight: 600; letter-spacing: -.015em;
}
body.pages-v2-body .pg-pq figcaption {
  margin-top: 18px; display: flex; align-items: center; gap: 10px;
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--on-hero-muted); font-weight: 700;
}
body.pages-v2-body .pg-pq figcaption::before { content: ""; flex: none; width: 28px; height: 2px; background: var(--gold); border-radius: 2px; }
/* The board's quote breaks out of the column, only where the page has the room. */
@media (min-width: 1100px) {
  body.pages-v2-body .pg-pq { margin: 22px -110px; }
}

/* The article's end: the share row and the category chips. */
body.pages-v2-body .pg-aend { margin-top: 44px; border-top: 1px solid var(--border); padding-top: 8px; display: flex; flex-direction: column; }
body.pages-v2-body .pg-aend__row { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 20px; align-items: center; padding-block: 18px; }
body.pages-v2-body .pg-aend__row + .pg-aend__row { border-top: 1px solid var(--border); }
body.pages-v2-body .pg-aend .pg-chips { gap: 8px; }
body.pages-v2-body .pg-aend .pg-chip { height: 40px; padding: 0 16px; font-size: 13px; }

/* "Latest news" on a white band. */
body.pages-v2-body .pg-amore { background: var(--surface); padding-block: 72px 88px; margin-top: 64px; border-top: 1px solid var(--border); }
body.pages-v2-body .pg-amore .pg-sec__head { margin-bottom: 32px; }
body.pages-v2-body .pg-amore .pg-ncard { box-shadow: none; border: 1px solid var(--border); }
/* The white band runs straight into the footer, as on the board. Relies on
   resources/views/site/layout.blade.php rendering <main> immediately followed
   by <footer class="footer">; change that order and this stops matching. */
body.pages-v2-body main:has(> .pg-amore:last-child) + .footer { margin-top: 0; }

@media (prefers-reduced-motion: no-preference) {
  body.pages-v2-body .pg-shr { transition: background .25s var(--pg-ease), color .25s var(--pg-ease), border-color .25s var(--pg-ease); }
}

[dir="rtl"] body.pages-v2-body .pg-ahd__title { font-size: 44px; line-height: 1.3; letter-spacing: 0; }
[dir="rtl"] body.pages-v2-body .pg-prose { line-height: 1.95; }
[dir="rtl"] body.pages-v2-body .pg-prose .pg-lead { line-height: 1.75; letter-spacing: 0; }
[dir="rtl"] body.pages-v2-body .pg-pq blockquote { line-height: 1.6; letter-spacing: 0; }
[dir="rtl"] body.pages-v2-body .pg-ameta__k,
[dir="rtl"] body.pages-v2-body .pg-pq figcaption { letter-spacing: 0; }

@media (max-width: 760px) {
  body.pages-v2-body .pg-ahd { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-block: 24px 28px; }
  body.pages-v2-body .pg-ahd__text { gap: 14px; padding: 0; }
  body.pages-v2-body .pg-ahd__title { font-size: 30px; line-height: 1.15; }
  [dir="rtl"] body.pages-v2-body .pg-ahd__title { font-size: 28px; }
  body.pages-v2-body .pg-ahd__fig { border-radius: 18px; }
  body.pages-v2-body .pg-abody { padding-block: 28px 0; }
  body.pages-v2-body .pg-ameta { flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 24px; padding-bottom: 18px; }
  body.pages-v2-body .pg-ameta__s { margin-inline-start: 0; }
  body.pages-v2-body .pg-prose { font-size: 17px; }
  body.pages-v2-body .pg-prose .pg-lead { font-size: 19px; margin-bottom: 0; }
  body.pages-v2-body .pg-lead--dropcap::first-letter { font-size: 64px; padding: 6px 10px 0 0; }
  body.pages-v2-body .pg-pq { margin: 12px 0; padding: 28px 22px 24px; border-radius: 20px; }
  body.pages-v2-body .pg-pq::after { font-size: 110px; inset-inline-start: 18px; }
  body.pages-v2-body .pg-pq blockquote { font-size: 21px; padding-top: 30px; }
  body.pages-v2-body .pg-aend { margin-top: 32px; }
  body.pages-v2-body .pg-aend__row { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-block: 16px; }
  body.pages-v2-body .pg-amore { padding-block: 44px 56px; margin-top: 44px; }
  body.pages-v2-body .pg-amore .pg-sec__head { margin-bottom: 20px; }
  /* The board swaps the cards for a dense thumbnail list (.amore__list);
     restyling the same cards keeps one link per story. */
  body.pages-v2-body .pg-amore .pg-ngrid {
    gap: 0; padding: 4px 18px; border: 1px solid var(--border); border-radius: 26px; background: var(--surface);
  }
  body.pages-v2-body .pg-amore .pg-ncard,
  body.pages-v2-body .pg-amore .pg-ncard:hover {
    display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 14px; align-items: center;
    padding: 16px 0; border: 0; border-radius: 0; background: none; box-shadow: none; transform: none;
  }
  body.pages-v2-body .pg-amore .pg-ncard + .pg-ncard { border-top: 1px solid var(--border); }
  body.pages-v2-body .pg-amore .pg-ncard__media { width: 90px; height: 72px; aspect-ratio: auto; border-radius: 14px; }
  body.pages-v2-body .pg-amore .pg-ncard:hover .pg-ncard__media > img { transform: none; }
  body.pages-v2-body .pg-amore .pg-ncard__body { padding: 0; gap: 6px; }
  body.pages-v2-body .pg-amore .pg-ncard h3 { font-size: 16px; }
  /* The excerpt stays on phones too (TL ruling); only
     "Read more" goes, the whole row being the link. */
  body.pages-v2-body .pg-amore .pg-ncard p { font-size: 14px; -webkit-line-clamp: 2; }
  body.pages-v2-body .pg-amore .pg-ncard .pg-more { display: none; }
  body.pages-v2-body .pg-amore .pg-nophoto img { width: 28px; height: 28px; }
}

/* ============================ CLUB: HISTORY =========================== */
/* Board block "club" (C1-C3), the History section: story beside the photo,
   the milestones line, vision and mission on navy, values, governance and
   objectives. Each later block opens with the board's section gap. The
   squad, staff and address rules come with their markup. */
body.pages-v2-body .pg-club-block { margin-top: 96px; }

body.pages-v2-body .pg-story {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 72px; align-items: start;
}
/* No photo: the text takes the row. */
body.pages-v2-body .pg-story--solo { grid-template-columns: minmax(0, 1fr); }
body.pages-v2-body .pg-story__text { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
body.pages-v2-body .pg-story__text p { margin: 0; color: var(--text-muted); font-size: 17px; max-width: 62ch; }
body.pages-v2-body .pg-story__text .pg-story__lead { color: var(--text); font-size: 21px; line-height: 1.5; font-weight: 500; }
/* Before club:split-history: today's whole text, bold headings and all. */
body.pages-v2-body .pg-story__whole { color: var(--text-muted); font-size: 17px; max-width: 62ch; }
body.pages-v2-body .pg-story__whole strong { color: var(--text); }
body.pages-v2-body .pg-story__img {
  position: relative; margin: 0; border-radius: 26px; overflow: hidden; aspect-ratio: 4 / 5;
  box-shadow: var(--shadow-hero); background: var(--surface-2);
}
body.pages-v2-body .pg-story__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* On a navy plate over the photo: white in both themes. */
body.pages-v2-body .pg-story__img figcaption {
  position: absolute; bottom: 16px; inset-inline: 16px; padding: 10px 14px; border-radius: 12px;
  background: rgba(14, 37, 71, .82); color: #fff; font-size: 13px; font-weight: 600; backdrop-filter: blur(6px);
}

body.pages-v2-body .pg-tl {
  position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
  margin: 72px 0 0; padding: 0; list-style: none; border-top: 2px solid var(--blue-100);
}
[data-theme="dark"] body.pages-v2-body .pg-tl { border-color: var(--border); }
body.pages-v2-body .pg-tl__item { position: relative; padding-block: 40px 0; padding-inline: 0 28px; display: flex; flex-direction: column; gap: 14px; }
body.pages-v2-body .pg-tl__item::before {
  content: ""; position: absolute; top: -9px; inset-inline-start: 0; width: 16px; height: 16px; border-radius: 50%;
  background: var(--surface); border: 3px solid var(--pg-ink);
}
body.pages-v2-body .pg-tl__item:first-child::before { background: var(--pg-ink); }
body.pages-v2-body .pg-tl__n { font-size: 12px; font-weight: 700; letter-spacing: .2em; color: var(--text-muted); }
body.pages-v2-body .pg-tl__big { font-size: 68px; line-height: .95; font-weight: 700; letter-spacing: -.04em; color: var(--blue-900); }
[data-theme="dark"] body.pages-v2-body .pg-tl__big { color: var(--text); }
body.pages-v2-body .pg-tl__item:not(:first-child) .pg-tl__big { color: transparent; -webkit-text-stroke: 1.5px var(--pg-ink); }
body.pages-v2-body .pg-tl__t { margin: 0; color: var(--text-muted); font-size: 16px; max-width: 30ch; }

/* Vision and mission: navy in both themes, gold icon. */
body.pages-v2-body .pg-vm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
body.pages-v2-body .pg-vm__card {
  position: relative; overflow: hidden; isolation: isolate; border-radius: 26px; padding: 44px 40px; min-height: 300px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
  background: linear-gradient(135deg, #143257, #0E2547); color: var(--on-hero); box-shadow: var(--shadow-hero);
}
body.pages-v2-body .pg-vm__card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .3;
  background: url("../images/brand/pattern-fanar-line-right.svg") 120% 50% / 520px no-repeat;
}
[dir="rtl"] body.pages-v2-body .pg-vm__card::before { transform: scaleX(-1); }
body.pages-v2-body .pg-vm__card i {
  width: 56px; height: 56px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); color: var(--gold);
}
body.pages-v2-body .pg-vm__card i svg { width: 26px; height: 26px; }
body.pages-v2-body .pg-vm__k { margin: 0; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--on-hero-muted); font-weight: 700; }
body.pages-v2-body .pg-vm__card p { margin: 0; font-size: 24px; line-height: 1.4; color: #fff; font-weight: 500; letter-spacing: -.01em; max-width: 34ch; }

body.pages-v2-body .pg-vals { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 18px; }
body.pages-v2-body .pg-val {
  background: var(--surface); border-radius: 22px; padding: 28px; box-shadow: var(--shadow-raised);
  display: flex; flex-direction: column; gap: 12px;
}
body.pages-v2-body .pg-val--intro { background: transparent; box-shadow: none; padding: 4px 0; justify-content: center; }
body.pages-v2-body .pg-val__n { font-size: 56px; line-height: 1; font-weight: 700; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px var(--blue-300); }
body.pages-v2-body .pg-val h3 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
body.pages-v2-body .pg-val p { margin: 0; color: var(--text-muted); font-size: 15px; }
/* The intro reads at 18 px like the other section intros (.pg-sec__intro,
   .pg-get__text p), not the board's cascaded 15 px. */
body.pages-v2-body .pg-val--intro p { font-size: 18px; line-height: 1.55; font-weight: 500; }

body.pages-v2-body .pg-gov { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
body.pages-v2-body .pg-gov__col {
  border: 1px solid var(--border); border-radius: 22px; padding: 28px; background: var(--surface);
  display: flex; flex-direction: column; gap: 16px;
}
body.pages-v2-body .pg-gov__col h3 { margin: 0; font-size: 18px; font-weight: 700; }
body.pages-v2-body .pg-gov__col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; font-size: 15px; color: var(--text-muted); }
body.pages-v2-body .pg-gov__col li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; }
body.pages-v2-body .pg-gov__col li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--pg-ink); margin-top: .6em; }
body.pages-v2-body .pg-gov__col li strong { color: var(--text); }

body.pages-v2-body .pg-obj { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; margin: 0; padding: 0; list-style: none; }
body.pages-v2-body .pg-obj__item {
  display: grid; grid-template-columns: 96px 1fr; gap: 20px; align-items: center;
  padding: 22px 0; border-top: 1px solid var(--border);
}
body.pages-v2-body .pg-obj__n { font-size: 64px; line-height: 1; font-weight: 700; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px var(--pg-ink); }
body.pages-v2-body .pg-obj__item > span + span { font-size: 19px; font-weight: 600; line-height: 1.35; }

[dir="rtl"] body.pages-v2-body .pg-tl__big,
[dir="rtl"] body.pages-v2-body .pg-vm__k { letter-spacing: 0; }

@media (max-width: 760px) {
  body.pages-v2-body .pg-club-block { margin-top: 64px; }
  body.pages-v2-body .pg-story { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  body.pages-v2-body .pg-story__text .pg-story__lead { font-size: 18px; }
  body.pages-v2-body .pg-story__img { aspect-ratio: 4 / 3; }
  body.pages-v2-body .pg-tl {
    grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 44px; margin-inline-start: 8px;
    border-top: 0; border-inline-start: 2px solid var(--blue-100);
  }
  [data-theme="dark"] body.pages-v2-body .pg-tl { border-color: var(--border); }
  body.pages-v2-body .pg-tl__item { padding-block: 0; padding-inline: 26px 0; }
  body.pages-v2-body .pg-tl__item::before { top: 4px; inset-inline-start: -9px; }
  body.pages-v2-body .pg-tl__big { font-size: 48px; }
  body.pages-v2-body .pg-vm { grid-template-columns: minmax(0, 1fr); }
  body.pages-v2-body .pg-vm__card { padding: 28px 24px; min-height: 0; }
  body.pages-v2-body .pg-vm__card p { font-size: 19px; }
  body.pages-v2-body .pg-gov { grid-template-columns: minmax(0, 1fr); }
  body.pages-v2-body .pg-obj { grid-template-columns: minmax(0, 1fr); }
  body.pages-v2-body .pg-obj__item { grid-template-columns: 64px 1fr; padding: 16px 0; }
  body.pages-v2-body .pg-obj__n { font-size: 44px; }
  body.pages-v2-body .pg-obj__item > span + span { font-size: 16px; }
}

/* ============================ CLUB: SQUAD ============================= */
/* Board "revision 1 (2 Nov): squad cards" (C1-C3): one block per position
   group (the outlined count beside the group's name), then its cards, four
   a row (two on phones). A card is navy in both themes; a linked one opens
   the player's profile and carries the arrow chip, an unlinked one is plain. */
body.pages-v2-body .pg-sec--squad {
  overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, var(--bg) 0%, var(--surface-2) 100%);
}
body.pages-v2-body .pg-sec--squad::before {
  content: ""; position: absolute; z-index: -1; inset-inline-end: -120px; top: -60px; width: 620px; height: 620px;
  background: url("../images/brand/pattern-fanar-line-right.svg") center / contain no-repeat; opacity: .5; pointer-events: none;
}
[dir="rtl"] body.pages-v2-body .pg-sec--squad::before { transform: scaleX(-1); }
[data-theme="dark"] body.pages-v2-body .pg-sec--squad::before { opacity: .15; }

body.pages-v2-body .pg-sqg {
  display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px;
  padding-block: 44px; border-top: 1px solid rgba(30, 66, 122, .14);
}
[data-theme="dark"] body.pages-v2-body .pg-sqg { border-color: var(--border); }
body.pages-v2-body .pg-sec__head + .pg-sqg { border-top: 0; padding-top: 0; }
body.pages-v2-body .pg-sqg__h { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
body.pages-v2-body .pg-sqg__c {
  font-size: 104px; line-height: .9; font-weight: 700; letter-spacing: -.05em;
  color: transparent; -webkit-text-stroke: 1.5px var(--pg-ink);
}
body.pages-v2-body .pg-sqg__t { margin: 0; font-size: 30px; line-height: 1.1; font-weight: 700; letter-spacing: -.015em; }
body.pages-v2-body .pg-sq { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }

/* Paired with :hover so they beat site.css's a:hover colour. */
body.pages-v2-body .pg-sqc,
body.pages-v2-body .pg-sqc:hover {
  position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 24px; overflow: hidden; isolation: isolate;
  color: #fff; text-decoration: none;
  background: radial-gradient(120% 70% at 50% 0%, #2E5490 0%, #143257 60%, #0E2547 100%);
  box-shadow: 0 1px 2px rgba(14, 37, 71, .08), 0 14px 34px rgba(14, 37, 71, .16);
}
body.pages-v2-body .pg-sqc > img {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 6%;
}
body.pages-v2-body .pg-sqc__shade {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(14, 37, 71, 0) 42%, rgba(14, 37, 71, .72) 68%, #0E2547 100%);
}
/* The shirt number: gold outline, decorative. Physical sides: its own
   dir="ltr" would flip a logical inset to the left on Arabic pages. */
body.pages-v2-body .pg-sqc__n {
  position: absolute; z-index: 2; top: 12px; left: 16px;
  font-size: 76px; line-height: 1; font-weight: 700; letter-spacing: -.05em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(207, 177, 111, .9); text-shadow: 0 2px 18px rgba(14, 37, 71, .25);
}
body.pages-v2-body .pg-sqc__body {
  position: absolute; z-index: 2; inset-inline: 18px; bottom: 18px;
  display: flex; flex-direction: column; gap: 8px;
}
body.pages-v2-body .pg-sqc__pos {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--on-hero-muted);
}
body.pages-v2-body .pg-sqc__pos::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
body.pages-v2-body .pg-sqc__name { display: flex; flex-direction: column; gap: 2px; text-transform: uppercase; }
body.pages-v2-body .pg-sqc__name small {
  font-size: 12px; font-weight: 500; letter-spacing: .06em; line-height: 1.3; color: var(--on-hero); opacity: .85;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
body.pages-v2-body .pg-sqc__name b { font-size: 21px; line-height: 1.05; font-weight: 700; letter-spacing: -.01em; overflow-wrap: anywhere; }
[dir="rtl"] body.pages-v2-body .pg-sqc__n { left: auto; right: 16px; }
body.pages-v2-body .pg-sqc__line {
  position: absolute; z-index: 2; bottom: 0; inset-inline-start: 0; height: 3px; width: 0; background: var(--gold);
}
body.pages-v2-body .pg-sqc__go {
  position: absolute; z-index: 2; top: 14px; inset-inline-end: 14px; width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; color: #fff;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .28); backdrop-filter: blur(6px);
}
body.pages-v2-body .pg-sqc__go svg { width: 16px; height: 16px; }
[dir="rtl"] body.pages-v2-body .pg-sqc__go svg { transform: scaleX(-1); }
body.pages-v2-body a.pg-sqc:hover .pg-sqc__line,
body.pages-v2-body a.pg-sqc:focus-visible .pg-sqc__line { width: 100%; }
body.pages-v2-body a.pg-sqc:hover .pg-sqc__go,
body.pages-v2-body a.pg-sqc:focus-visible .pg-sqc__go { background: #fff; color: var(--blue-900); }
body.pages-v2-body .pg-sqc--off { cursor: default; }
/* No photo: the crest on the fanar fill, decorative. */
body.pages-v2-body .pg-sqc__ph {
  position: absolute; inset: 0; z-index: 0; padding-bottom: 30%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
}
body.pages-v2-body .pg-sqc__ph::before {
  content: ""; position: absolute; inset: 0; opacity: .12; mix-blend-mode: screen;
  background: url("../images/brand/pattern-fanar-fill-full.svg") center / 360px repeat;
}
body.pages-v2-body .pg-sqc__ph img { position: relative; width: 64px; height: 64px; opacity: .4; filter: brightness(0) invert(1); }
body.pages-v2-body .pg-sqc__ph span {
  position: relative; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--on-hero-muted);
}
[dir="rtl"] body.pages-v2-body .pg-sqc__pos,
[dir="rtl"] body.pages-v2-body .pg-sqc__ph span,
[dir="rtl"] body.pages-v2-body .pg-sqg__t,
[dir="rtl"] body.pages-v2-body .pg-sqc__name small { letter-spacing: 0; }
[dir="rtl"] body.pages-v2-body .pg-sqc__name b { letter-spacing: 0; font-size: 22px; line-height: 1.3; }
[dir="rtl"] body.pages-v2-body .pg-sqc__name small { font-size: 13px; }

@media (prefers-reduced-motion: no-preference) {
  body.pages-v2-body .pg-sqc { transition: transform .45s var(--pg-ease), box-shadow .45s var(--pg-ease); }
  body.pages-v2-body .pg-sqc > img { transition: transform 1.1s var(--pg-ease); }
  body.pages-v2-body .pg-sqc__line { transition: width .5s var(--pg-ease); }
  body.pages-v2-body .pg-sqc__go { transition: background .3s var(--pg-ease), color .3s var(--pg-ease), transform .3s var(--pg-ease); }
  body.pages-v2-body a.pg-sqc:hover { transform: translateY(-6px); box-shadow: 0 30px 60px rgba(14, 37, 71, .3); }
  body.pages-v2-body a.pg-sqc:hover > img { transform: scale(1.06); }
  body.pages-v2-body a.pg-sqc:hover .pg-sqc__go { transform: rotate(-45deg); }
  [dir="rtl"] body.pages-v2-body a.pg-sqc:hover .pg-sqc__go { transform: rotate(45deg); }
}

/* ============================ CLUB: STAFF ============================= */
/* Board ".staff": one row card per person, the photo or the initials in
   the round. The second department runs straight on from the first. */
body.pages-v2-body .pg-sec--staff + .pg-sec--staff { padding-top: 0; }
body.pages-v2-body .pg-staff { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 14px; }
body.pages-v2-body .pg-stf {
  display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 16px; align-items: center;
  padding: 16px 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border);
}
body.pages-v2-body .pg-stf i {
  width: 60px; height: 60px; border-radius: 50%; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--pg-ink); font-style: normal; font-weight: 700; font-size: 16px; letter-spacing: .04em;
}
body.pages-v2-body .pg-stf i img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 10%; display: block; }
body.pages-v2-body .pg-stf b { display: block; font-size: 16px; line-height: 1.25; }
body.pages-v2-body .pg-stf span { display: block; margin-top: 3px; font-size: 13px; line-height: 1.35; color: var(--text-muted); }
[dir="rtl"] body.pages-v2-body .pg-stf i { letter-spacing: 0; }

/* ============================ CLUB: ADDRESS =========================== */
/* Board ".visit": the contact rows beside today's Google map, on white. */
body.pages-v2-body .pg-sec--address { background: var(--surface); }
/* As on the board, the white address band meets the footer (see .pg-amore
   for the layout coupling). As tabs, only while Address is the open one. */
body.pages-v2-body main:not(.pg-tabbed):has(> .pg-sec--address:last-child) + .footer,
body.pages-v2-body main.pg-tabbed:has(> .pg-sec--address.is-current:last-child) + .footer { margin-top: 0; }
body.pages-v2-body .pg-visit { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 24px; align-items: stretch; }
body.pages-v2-body .pg-info {
  background: var(--surface); border-radius: 24px; box-shadow: var(--shadow-raised); border: 1px solid var(--border);
  padding: 12px 28px; display: flex; flex-direction: column;
}
body.pages-v2-body .pg-irow {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 18px; align-items: center;
  padding: 22px 0; border-top: 1px solid var(--border);
}
body.pages-v2-body .pg-irow:first-child { border-top: 0; }
body.pages-v2-body .pg-irow i {
  width: 52px; height: 52px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--pg-ink);
}
body.pages-v2-body .pg-irow i svg { width: 22px; height: 22px; }
body.pages-v2-body .pg-irow__k { display: block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
body.pages-v2-body .pg-irow__v { display: block; margin-top: 4px; font-size: 19px; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
body.pages-v2-body a.pg-irow__v,
body.pages-v2-body a.pg-irow__v:hover { color: var(--pg-ink); }
[dir="rtl"] body.pages-v2-body .pg-irow__k { letter-spacing: 0; }
body.pages-v2-body .pg-map {
  position: relative; min-height: 360px; border-radius: 24px; overflow: hidden;
  background: var(--surface-2); box-shadow: var(--shadow-raised);
}
body.pages-v2-body .pg-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

@media (max-width: 760px) {
  body.pages-v2-body .pg-sec--squad::before { width: 360px; height: 360px; inset-inline-end: -140px; }
  body.pages-v2-body .pg-sqg { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-block: 28px; }
  body.pages-v2-body .pg-sqg__h { flex-direction: row; align-items: baseline; gap: 12px; }
  body.pages-v2-body .pg-sqg__c { font-size: 48px; }
  body.pages-v2-body .pg-sqg__t { font-size: 24px; }
  body.pages-v2-body .pg-sq { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  /* Paired with :hover to beat site.css's a:hover, as above. */
  body.pages-v2-body .pg-sqc,
  body.pages-v2-body .pg-sqc:hover { border-radius: 18px; }
  body.pages-v2-body .pg-sqc__n { font-size: 46px; top: 8px; left: 11px; }
  [dir="rtl"] body.pages-v2-body .pg-sqc__n { left: auto; right: 11px; }
  body.pages-v2-body .pg-sqc__body { inset-inline: 12px; bottom: 12px; gap: 5px; }
  body.pages-v2-body .pg-sqc__pos { font-size: 9px; letter-spacing: .12em; gap: 6px; }
  body.pages-v2-body .pg-sqc__name small { font-size: 10px; letter-spacing: .03em; }
  body.pages-v2-body .pg-sqc__name b { font-size: 15px; }
  [dir="rtl"] body.pages-v2-body .pg-sqc__pos,
  [dir="rtl"] body.pages-v2-body .pg-sqc__name small { letter-spacing: 0; }
  [dir="rtl"] body.pages-v2-body .pg-sqc__name b { font-size: 16px; }
  [dir="rtl"] body.pages-v2-body .pg-sqc__name small { font-size: 11px; }
  body.pages-v2-body .pg-sqc__go { width: 30px; height: 30px; top: 10px; inset-inline-end: 10px; }
  body.pages-v2-body .pg-sqc__go svg { width: 13px; height: 13px; }
  body.pages-v2-body .pg-sqc__ph img { width: 44px; height: 44px; }
  body.pages-v2-body .pg-visit { grid-template-columns: minmax(0, 1fr); }
  body.pages-v2-body .pg-info { padding: 4px 20px; }
  body.pages-v2-body .pg-irow__v { font-size: 16px; }
  body.pages-v2-body .pg-map { min-height: 240px; }
}

/* ============================ MEDIA =================================== */
/* Board blocks "media" and "revision 2 … media viewers" (M1-M3): the video
   viewer (.pg-vv: stage + Up next), the photo viewer (.pg-pv: stage, strip,
   "Latest album" aside), Watch it back (today's video cards), the albums
   masonry (.pg-alb) and the standalone photos (today's gallery tiles). */
body.pages-v2-body .pg-viewers { padding-block: 56px 0; }
body.pages-v2-body .pg-viewers--photos { padding-block: 64px 96px; }
body.pages-v2-body .pg-vhead { display: flex; align-items: baseline; gap: 18px; margin-bottom: 22px; }
body.pages-v2-body .pg-vhead__title { margin: 0; font-size: 28px; line-height: 1.15; font-weight: 700; letter-spacing: -.01em; }
body.pages-v2-body .pg-sec__count { font-weight: 700; color: var(--text-muted); white-space: nowrap; }

/* Video viewer. */
body.pages-v2-body .pg-vv,
body.pages-v2-body .pg-pv { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: stretch; }
body.pages-v2-body .pg-vv--solo,
body.pages-v2-body .pg-pv--solo { grid-template-columns: minmax(0, 1fr); }
body.pages-v2-body .pg-vplayer { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
body.pages-v2-body .pg-vplayer__media {
  position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 26px; overflow: hidden;
  background: #07142A; box-shadow: var(--shadow-hero); color: #fff;
}
/* contain, as today's video card: the club shoots vertical, and a 9:16 clip
   cropped to fill 16:9 loses everything but a band across the middle. */
body.pages-v2-body .pg-vplayer__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
body.pages-v2-body .pg-vplayer__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
body.pages-v2-body .pg-vplayer__shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 20, 42, .35) 0%, rgba(7, 20, 42, 0) 30%, rgba(7, 20, 42, 0) 62%, rgba(7, 20, 42, .85) 100%);
}
body.pages-v2-body .pg-vplayer__live {
  position: absolute; top: 20px; inset-inline-start: 20px; z-index: 2; pointer-events: none;
  display: inline-flex; align-items: center; gap: 8px; padding-block: 7px; padding-inline: 10px 14px; border-radius: 999px;
  background: rgba(14, 37, 71, .6); border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(8px);
  color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
body.pages-v2-body .pg-vplayer__live .i { width: 16px; height: 16px; color: var(--gold); }
body.pages-v2-body .pg-vplayer__play {
  position: absolute; top: 50%; left: 50%; z-index: 2; transform: translate(-50%, -50%);
  width: 108px; height: 108px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: #fff; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 14px rgba(255, 255, 255, .18), 0 24px 50px rgba(0, 0, 0, .4);
}
body.pages-v2-body .pg-vplayer__play[hidden] { display: none; }
body.pages-v2-body .pg-vplayer__play svg { width: 34px; height: 34px; fill: var(--blue-700); margin-left: 6px; }
body.pages-v2-body .pg-vplayer__info { display: flex; flex-direction: column; gap: 10px; padding-inline: 4px; }
body.pages-v2-body .pg-vplayer__title { margin: 0; font-size: 34px; line-height: 1.15; font-weight: 700; letter-spacing: -.02em; text-wrap: balance; }
body.pages-v2-body .pg-vplayer__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 14px; color: var(--text-muted); font-weight: 600; }
body.pages-v2-body .pg-vplayer__meta i { width: 4px; height: 4px; border-radius: 50%; background: var(--blue-300); }
body.pages-v2-body .pg-vrail {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--surface); border-radius: 26px; box-shadow: var(--shadow-raised); padding: 22px 22px 10px;
}
body.pages-v2-body .pg-vrail__h {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-bottom: 14px; border-bottom: 1px solid var(--border);
}
body.pages-v2-body .pg-vrail__h .pg-more { font-size: 13px; }
body.pages-v2-body .pg-vrail__list { display: flex; flex-direction: column; flex: 1; justify-content: space-around; }
body.pages-v2-body .pg-vn,
body.pages-v2-body .pg-vn:hover {
  display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; align-items: center;
  padding: 14px 0; border-top: 1px solid var(--border); text-align: start; color: var(--text);
}
body.pages-v2-body .pg-vn:first-child { border-top: 0; }
body.pages-v2-body .pg-vn__th { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--blue-900); }
/* The Up-next item now on the stage (site-pages.js pg-video-pick): the
   photo thumbs' current ring on its thumbnail, its play mark showing. */
body.pages-v2-body .pg-vn.is-current .pg-vn__th { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--pg-ink); }
body.pages-v2-body .pg-vn.is-current .pg-vn__pl { opacity: 1; }
body.pages-v2-body .pg-vn__th > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
body.pages-v2-body .pg-vn__th .pg-nophoto img { width: 26px; height: 26px; }
body.pages-v2-body .pg-vn__dur {
  position: absolute; bottom: 6px; inset-inline-end: 6px; z-index: 1;
  background: rgba(14, 37, 71, .85); color: #fff; border-radius: 6px; padding: 2px 6px; font-size: 11px; font-weight: 700;
}
body.pages-v2-body .pg-vn__pl {
  position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center;
  opacity: 0; background: rgba(14, 37, 71, .35);
}
body.pages-v2-body .pg-vn__pl svg { width: 20px; height: 20px; fill: #fff; }
body.pages-v2-body .pg-vn:hover .pg-vn__pl,
body.pages-v2-body .pg-vn:focus-visible .pg-vn__pl { opacity: 1; }
body.pages-v2-body .pg-vn__tx { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
body.pages-v2-body .pg-vn__tx small { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pg-ink); }
body.pages-v2-body .pg-vn__tx b {
  font-size: 14.5px; line-height: 1.3; font-weight: 700;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* Photo viewer. The stage photo and the strip; prev/next start hidden and
   site-pages.js shows them. */
body.pages-v2-body .pg-pv:focus-visible { outline: 3px solid var(--pg-ink); outline-offset: 6px; border-radius: 26px; }
body.pages-v2-body .pg-pv__main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
body.pages-v2-body .pg-pv__stage { position: relative; aspect-ratio: 16 / 9; border-radius: 26px; overflow: hidden; background: #07142A; box-shadow: var(--shadow-hero); }
body.pages-v2-body .pg-pv__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The navy block for a photo with no URL; site-pages.js swaps it with the photo. */
body.pages-v2-body .pg-pv__none { position: absolute; inset: 0; }
body.pages-v2-body .pg-pv__img[hidden],
body.pages-v2-body .pg-pv__none[hidden] { display: none; }
body.pages-v2-body .pg-pv__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(7, 20, 42, 0) 60%, rgba(7, 20, 42, .8) 100%); }
body.pages-v2-body .pg-pv__btn,
body.pages-v2-body .pg-pv__btn:hover {
  position: absolute; z-index: 2; width: 56px; height: 56px; border-radius: 50%; padding: 0; cursor: pointer;
  background: rgba(14, 37, 71, .5); border: 1px solid rgba(255, 255, 255, .28); backdrop-filter: blur(8px);
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
}
body.pages-v2-body .pg-pv__btn:hover { background: #fff; color: var(--blue-900); }
body.pages-v2-body .pg-pv__btn[hidden] { display: none; }
body.pages-v2-body .pg-pv__btn svg { width: 22px; height: 22px; }
body.pages-v2-body .pg-pv__prev { top: 50%; inset-inline-start: 20px; transform: translateY(-50%); }
body.pages-v2-body .pg-pv__next { top: 50%; inset-inline-end: 20px; transform: translateY(-50%); }
[dir="rtl"] body.pages-v2-body .pg-pv__prev svg,
[dir="rtl"] body.pages-v2-body .pg-pv__next svg { transform: scaleX(-1); }
body.pages-v2-body .pg-pv__full,
body.pages-v2-body .pg-pv__full:hover { top: 20px; inset-inline-end: 20px; width: 46px; height: 46px; }
body.pages-v2-body .pg-pv__full svg { width: 18px; height: 18px; }
body.pages-v2-body .pg-pv__cap {
  position: absolute; inset-inline: 24px; bottom: 20px; z-index: 1;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; color: #fff;
}
body.pages-v2-body .pg-pv__cap > span:first-child { font-size: 17px; font-weight: 600; line-height: 1.35; max-width: 60ch; }
body.pages-v2-body .pg-pv__count {
  flex: none; font-size: 14px; font-weight: 700; letter-spacing: .12em;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; padding: 6px 14px;
}
body.pages-v2-body .pg-pv__thumbs { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 10px; }
/* The album page shows the whole strip (.pg-pv__thumbs--all) in one row,
   as the board does: the thumbs share the row down to 56 px each (the
   board's 19 fit), then the row scrolls sideways instead of shrinking them
   to slivers; few photos stop at 120 px. The padding keeps the current
   ring inside the scroll box. Phones keep the 76 px swipe strip below. */
@media (min-width: 761px) {
  body.pages-v2-body .pg-pv__thumbs--all {
    display: flex; gap: 8px; overflow-x: auto; scrollbar-width: thin;
    padding: 6px; margin: -6px;
  }
  body.pages-v2-body .pg-pv__thumbs--all .pg-pv__t { flex: 1 0 56px; max-width: 120px; border-radius: 10px; }
}
body.pages-v2-body .pg-pv__t {
  position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden;
  background: var(--surface-2); opacity: .62;
}
body.pages-v2-body .pg-pv__t:hover,
body.pages-v2-body .pg-pv__t:focus-visible { opacity: 1; }
body.pages-v2-body .pg-pv__t img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.pages-v2-body .pg-pv__t .pg-nophoto img { width: 22px; height: 22px; }
body.pages-v2-body .pg-pv__t.is-current { opacity: 1; box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--pg-ink); }
body.pages-v2-body .pg-pv__t--more,
body.pages-v2-body .pg-pv__t--more:hover {
  opacity: 1; background: var(--blue-900); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 17px;
}

/* The "Latest album" aside. */
body.pages-v2-body .pg-pvinfo {
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0;
  background: var(--surface); border-radius: 26px; box-shadow: var(--shadow-raised); padding: 28px 26px;
}
body.pages-v2-body .pg-pvinfo__title { margin: 0; font-size: 24px; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; text-wrap: pretty; }
body.pages-v2-body .pg-pvinfo .pg-pill { text-transform: none; letter-spacing: normal; font-size: 13px; }
body.pages-v2-body .pg-pvinfo .pg-pill .i { width: 14px; height: 14px; }
body.pages-v2-body .pg-pvinfo__more { margin-top: auto; width: 100%; display: flex; flex-direction: column; border-top: 1px solid var(--border); padding-top: 16px; }
body.pages-v2-body .pg-pvinfo__k { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; margin-bottom: 6px; }
body.pages-v2-body .pg-pva,
body.pages-v2-body .pg-pva:hover { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 0; color: var(--text); }
body.pages-v2-body .pg-pva__th { position: relative; width: 72px; height: 54px; border-radius: 10px; overflow: hidden; background: var(--blue-900); }
body.pages-v2-body .pg-pva__th > img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.pages-v2-body .pg-pva__th .pg-nophoto img { width: 22px; height: 22px; }
body.pages-v2-body .pg-pva b {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 14px; line-height: 1.3;
}
body.pages-v2-body .pg-pva small { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px; }
body.pages-v2-body .pg-pvinfo__more .pg-more { align-self: flex-start; margin-top: 8px; }

/* Watch it back: a white band of today's video cards. */
body.pages-v2-body .pg-sec--watch { background: var(--surface); }
body.pages-v2-body .pg-sec--watch .pg-chips { margin-bottom: 28px; }
body.pages-v2-body .pg-vgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
body.pages-v2-body .pg-vgrid__item { min-width: 0; }
body.pages-v2-body .pg-vgrid__item > .card { height: 100%; }
/* Today's video card (site.partials.videocard), drawn as the board's .vc:
   no card frame, the rounded 16:9 picture, the title under it, and a play
   mark on the cards that open their video elsewhere (a direct file keeps
   its native controls, so it gets none). */
body.pages-v2-body .pg-vgrid__item > .card { background: none; border: 0; box-shadow: none; border-radius: 0; overflow: visible; }
body.pages-v2-body .pg-vgrid__item .card__media { border-radius: 20px; background: var(--blue-900); box-shadow: var(--shadow-raised); }
body.pages-v2-body .pg-vgrid__item .videocard__badge { background: rgba(14, 37, 71, .8); color: #fff; border-radius: 8px; padding: 4px 8px; font-weight: 700; }
body.pages-v2-body .pg-vgrid__item .videocard__body { padding: 14px 0 0; }
body.pages-v2-body .pg-vgrid__item .iconbubble { display: none; }
body.pages-v2-body .pg-vgrid__item .videocard__title { font-size: 17px; line-height: 1.3; }
body.pages-v2-body .pg-vgrid__item a.card .card__media::before {
  content: ""; position: absolute; top: 50%; left: 50%; z-index: 1; width: 56px; height: 56px; margin: -28px 0 0 -28px;
  border-radius: 50%; background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
body.pages-v2-body .pg-vgrid__item a.card .card__media::after {
  content: ""; position: absolute; top: 50%; left: 50%; z-index: 2; margin: -8px 0 0 -4px;
  border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent var(--blue-700);
}

/* Albums: the board's masonry. Height varies by position (the board's
   cards are 460 / 300 / 380), never by content. */
body.pages-v2-body .pg-masonry { columns: 3; column-gap: 22px; }
body.pages-v2-body .pg-alb,
body.pages-v2-body .pg-alb:hover {
  position: relative; display: block; break-inside: avoid; margin-bottom: 22px; height: 380px;
  border-radius: 24px; overflow: hidden; background: var(--surface-2); color: #fff; box-shadow: var(--shadow-raised);
}
body.pages-v2-body .pg-alb:nth-child(3n + 1) { height: 460px; }
body.pages-v2-body .pg-alb:nth-child(3n + 2) { height: 300px; }
body.pages-v2-body .pg-alb > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
body.pages-v2-body .pg-alb::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(14, 37, 71, 0) 40%, rgba(14, 37, 71, .9) 100%);
}
body.pages-v2-body .pg-alb__body {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 2; padding: 24px;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
}
body.pages-v2-body .pg-alb__body b { font-size: 20px; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; text-wrap: pretty; }
body.pages-v2-body .pg-alb__cnt {
  position: absolute; top: 18px; inset-inline-end: 18px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 6px 12px;
  background: rgba(14, 37, 71, .55); border: 1px solid rgba(255, 255, 255, .25); backdrop-filter: blur(8px);
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
}
body.pages-v2-body .pg-alb__cnt .i { width: 14px; height: 14px; }

/* Standalone photos: today's tiles, sized here instead of inline. */
body.pages-v2-body .pg-gallery { margin-top: 0; }
body.pages-v2-body .pg-gallery .galcell__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

[dir="rtl"] body.pages-v2-body .pg-vplayer__live,
[dir="rtl"] body.pages-v2-body .pg-vn__tx small,
[dir="rtl"] body.pages-v2-body .pg-pvinfo__k,
[dir="rtl"] body.pages-v2-body .pg-pv__count,
[dir="rtl"] body.pages-v2-body .pg-alb__cnt,
[dir="rtl"] body.pages-v2-body .pg-vhead__title { letter-spacing: 0; }
[dir="rtl"] body.pages-v2-body .pg-vplayer__title { line-height: 1.4; letter-spacing: 0; }

@media (prefers-reduced-motion: no-preference) {
  body.pages-v2-body .pg-vplayer__play { transition: transform .3s var(--pg-ease); }
  body.pages-v2-body .pg-vplayer__play:hover,
  body.pages-v2-body a.pg-vplayer__media:hover .pg-vplayer__play { transform: translate(-50%, -50%) scale(1.06); }
  body.pages-v2-body .pg-vn__pl { transition: opacity .25s; }
  body.pages-v2-body .pg-pv__btn { transition: background .25s; }
  body.pages-v2-body .pg-pv__t { transition: opacity .25s; }
  body.pages-v2-body .pg-alb > img { transition: transform 1.1s var(--pg-ease); }
  body.pages-v2-body .pg-alb:hover > img { transform: scale(1.05); }
}

@media (max-width: 1100px) {
  body.pages-v2-body .pg-vgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.pages-v2-body .pg-vv,
  body.pages-v2-body .pg-pv { grid-template-columns: minmax(0, 1fr) 320px; }
}

@media (max-width: 960px) {
  body.pages-v2-body .pg-vv,
  body.pages-v2-body .pg-pv { grid-template-columns: minmax(0, 1fr); }
  body.pages-v2-body .pg-masonry { columns: 2; }
}

@media (max-width: 760px) {
  body.pages-v2-body .pg-viewers { padding-block: 32px 0; }
  body.pages-v2-body .pg-viewers--photos { padding-block: 40px 56px; }
  body.pages-v2-body .pg-vhead { margin-bottom: 14px; flex-direction: column; align-items: flex-start; gap: 8px; }
  body.pages-v2-body .pg-vhead__title { font-size: 22px; }
  body.pages-v2-body .pg-vv,
  body.pages-v2-body .pg-pv { gap: 16px; }
  body.pages-v2-body .pg-vplayer__media,
  body.pages-v2-body .pg-pv__stage { border-radius: 18px; }
  body.pages-v2-body .pg-vplayer__live { top: 12px; inset-inline-start: 12px; font-size: 10px; padding-block: 5px; padding-inline: 8px 10px; }
  body.pages-v2-body .pg-vplayer__play { width: 68px; height: 68px; box-shadow: 0 0 0 8px rgba(255, 255, 255, .18), 0 14px 30px rgba(0, 0, 0, .4); }
  body.pages-v2-body .pg-vplayer__play svg { width: 22px; height: 22px; }
  body.pages-v2-body .pg-vplayer__title { font-size: 22px; }
  body.pages-v2-body .pg-vplayer__meta { font-size: 13px; gap: 10px; }
  body.pages-v2-body .pg-vrail { background: none; box-shadow: none; padding: 0; border-radius: 0; }
  body.pages-v2-body .pg-vrail__h { border: 0; padding-bottom: 10px; }
  body.pages-v2-body .pg-vrail__list {
    flex-direction: row; overflow-x: auto; gap: 12px; scrollbar-width: none; scroll-snap-type: x mandatory;
    margin-inline: calc(var(--pg-gutter) * -1); padding-inline: var(--pg-gutter);
  }
  body.pages-v2-body .pg-vrail__list::-webkit-scrollbar { display: none; }
  body.pages-v2-body .pg-vn,
  body.pages-v2-body .pg-vn:hover { flex: 0 0 64%; grid-template-columns: 1fr; gap: 10px; padding: 0; border: 0; scroll-snap-align: start; }
  body.pages-v2-body .pg-vn__tx b { font-size: 14px; -webkit-line-clamp: 2; }
  body.pages-v2-body .pg-pv__btn,
  body.pages-v2-body .pg-pv__btn:hover { width: 42px; height: 42px; }
  body.pages-v2-body .pg-pv__prev { inset-inline-start: 10px; }
  body.pages-v2-body .pg-pv__next { inset-inline-end: 10px; }
  body.pages-v2-body .pg-pv__full,
  body.pages-v2-body .pg-pv__full:hover { top: 10px; inset-inline-end: 10px; width: 38px; height: 38px; }
  body.pages-v2-body .pg-pv__cap { inset-inline: 14px; bottom: 12px; gap: 10px; }
  body.pages-v2-body .pg-pv__cap > span:first-child {
    font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  body.pages-v2-body .pg-pv__count { font-size: 12px; padding: 4px 10px; }
  body.pages-v2-body .pg-pv__thumbs,
  body.pages-v2-body .pg-pv--solo .pg-pv__thumbs {
    display: flex; overflow-x: auto; gap: 8px; scrollbar-width: none;
    margin-inline: calc(var(--pg-gutter) * -1); padding: 4px var(--pg-gutter);
  }
  body.pages-v2-body .pg-pv__thumbs::-webkit-scrollbar { display: none; }
  body.pages-v2-body .pg-pv__t { flex: 0 0 76px; }
  body.pages-v2-body .pg-pvinfo { padding: 22px 20px; gap: 12px; border-radius: 20px; }
  body.pages-v2-body .pg-pvinfo__title { font-size: 20px; }
  body.pages-v2-body .pg-vgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  body.pages-v2-body .pg-masonry { columns: 1; }
  body.pages-v2-body .pg-alb,
  body.pages-v2-body .pg-alb:nth-child(n) { height: 300px; }
  body.pages-v2-body .pg-alb__body b { font-size: 18px; }
}

/* ============================ ALBUM =================================== */
/* Board block "album" + "revision 3 … album viewer on top" (AlbumEn /
   AlbumPhone): the solo photo viewer with the whole strip, then the mosaic
   (.pg-jgrid: a repeating 14-tile rhythm, the view sets the shapes) where
   the current photo is ringed, then today's video cards. */
body.pages-v2-body .pg-viewers--album { padding-block: 48px 72px; }
body.pages-v2-body .pg-pv--solo .pg-pv__stage { aspect-ratio: 16 / 8; }
body.pages-v2-body .pg-sec--mosaic,
body.pages-v2-body .pg-sec--mosaic + .pg-sec--album-videos { padding-top: 0; }
body.pages-v2-body h2.pg-vhead { margin: 0 0 22px; }

body.pages-v2-body .pg-jgrid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 210px; grid-auto-flow: dense; gap: 14px;
}
body.pages-v2-body .pg-jgrid__t,
body.pages-v2-body .pg-jgrid__t:hover {
  position: relative; display: block; width: 100%; height: 100%;
  border-radius: 18px; overflow: hidden; background: var(--surface-2); color: #fff;
}
body.pages-v2-body .pg-jgrid__t--big { grid-column: span 2; grid-row: span 2; }
body.pages-v2-body .pg-jgrid__t--tall { grid-row: span 2; }
body.pages-v2-body .pg-jgrid__t--wide { grid-column: span 2; }
body.pages-v2-body .pg-jgrid__t > img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.pages-v2-body .pg-jgrid__t > i {
  position: absolute; top: 12px; inset-inline-end: 12px; z-index: 1;
  width: 36px; height: 36px; border-radius: 50%; background: rgba(14, 37, 71, .55); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; opacity: 0;
}
body.pages-v2-body .pg-jgrid__t > i svg { width: 16px; height: 16px; }
body.pages-v2-body .pg-jgrid__t:hover > i,
body.pages-v2-body .pg-jgrid__t:focus-visible > i,
body.pages-v2-body .pg-jgrid__t.is-current > i { opacity: 1; }
body.pages-v2-body .pg-jgrid__t:focus-visible { outline: 3px solid var(--pg-ink); outline-offset: 3px; }
body.pages-v2-body .pg-jgrid__t.is-current { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--pg-ink); }

@media (prefers-reduced-motion: no-preference) {
  body.pages-v2-body .pg-jgrid__t > img { transition: transform 1s var(--pg-ease); }
  body.pages-v2-body .pg-jgrid__t:hover > img { transform: scale(1.05); }
  body.pages-v2-body .pg-jgrid__t > i { transition: opacity .3s; }
}

@media (max-width: 760px) {
  body.pages-v2-body .pg-viewers--album { padding-block: 28px 44px; }
  body.pages-v2-body .pg-pv--solo .pg-pv__stage { aspect-ratio: 4 / 3; }
  body.pages-v2-body .pg-jgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; gap: 10px; }
  body.pages-v2-body .pg-jgrid__t--wide { grid-column: span 1; }
}

/* ============================ SHOP ==================================== */
/* Board block "shop" (ShopEn / ShopAr / ShopPhone): the kits band (.kit,
   display-only: "In store" in the price slot) and the supporter gear grid
   (.pr) with today's add-to-cart form; the notes over the chips are the
   Cart board's "Other states" alerts. White product shots multiply into
   the light surfaces; in dark mode they sit as they are. */
body.pages-v2-body .pg-shop__notes { display: flex; flex-direction: column; gap: 14px; margin-bottom: 28px; }
body.pages-v2-body .pg-alert {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 18px 20px; border-radius: 18px; font-size: 15px; color: var(--text);
}
body.pages-v2-body .pg-alert > svg { width: 22px; height: 22px; flex: none; }
body.pages-v2-body .pg-alert--ok { background: color-mix(in srgb, var(--success) 14%, var(--surface)); }
body.pages-v2-body .pg-alert--ok > svg { color: var(--success); }
body.pages-v2-body .pg-alert--info { background: var(--surface-2); }
body.pages-v2-body .pg-alert--info > svg { color: var(--pg-ink); }
body.pages-v2-body .pg-alert b { display: block; margin-bottom: 2px; }
body.pages-v2-body .pg-alert a,
body.pages-v2-body .pg-alert a:hover { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

body.pages-v2-body .pg-shop__kits { margin-top: 40px; }
body.pages-v2-body .pg-shop .pg-empty { margin-top: 40px; }
body.pages-v2-body .pg-shop__gear { padding-top: 0; }
/* With no kits band above, the gear opens the page under the chips. */
body.pages-v2-body .pg-shop:not(:has(.pg-shop__kits)) + .pg-shop__gear { padding-top: 40px; }
body.pages-v2-body .pg-shop:not(:has(.pg-shop__kits)) { padding-bottom: 0; }

body.pages-v2-body .pg-kits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
body.pages-v2-body .pg-kit {
  position: relative; display: flex; flex-direction: column; gap: 16px;
  padding: 26px; border-radius: 24px; overflow: hidden;
  background: var(--surface); box-shadow: var(--shadow-raised);
}
body.pages-v2-body .pg-kit__tag { position: absolute; top: 18px; inset-inline-start: 18px; z-index: 1; }
body.pages-v2-body .pg-kit__img { position: relative; height: 300px; border-radius: 16px; overflow: hidden; }
body.pages-v2-body .pg-kit__img > img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
body.pages-v2-body .pg-kit__body { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
body.pages-v2-body .pg-kit__name { margin: 0; font-size: 20px; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; }
body.pages-v2-body .pg-kit__line { display: block; color: var(--text-muted); font-size: 13px; }
body.pages-v2-body .pg-kit__instore { font-size: 15px; font-weight: 700; color: var(--pg-ink); white-space: nowrap; }

body.pages-v2-body .pg-prods { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 20px; }
body.pages-v2-body .pg-pr {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border-radius: 22px; box-shadow: var(--shadow-raised);
}
body.pages-v2-body .pg-pr__img {
  position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
}
body.pages-v2-body .pg-pr__img > img { width: 82%; height: 82%; object-fit: contain; mix-blend-mode: multiply; }
[data-theme="dark"] body.pages-v2-body .pg-kit__img > img,
[data-theme="dark"] body.pages-v2-body .pg-pr__img > img { mix-blend-mode: normal; }
body.pages-v2-body .pg-pr__body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 20px; }
body.pages-v2-body .pg-pr__name { margin: 0; font-size: 16px; line-height: 1.3; font-weight: 700; }
body.pages-v2-body .pg-pr__row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
body.pages-v2-body .pg-pr__price { font-size: 18px; font-weight: 700; color: var(--pg-ink); white-space: nowrap; }
body.pages-v2-body .pg-pr__buy { flex: 1; display: flex; flex-direction: column; gap: 10px; }
body.pages-v2-body .pg-pr__add { width: 100%; height: 46px; margin-top: auto; border-radius: 12px; font-size: 14px; }
body.pages-v2-body .pg-pr__add > svg { width: 18px; height: 18px; }

/* Size / colour: real radios as pills (today's control, the board's chips). */
body.pages-v2-body .pg-variant { display: flex; flex-direction: column; gap: 6px; }
body.pages-v2-body .pg-variant__label { font-size: 12px; font-weight: 700; color: var(--text-muted); }
body.pages-v2-body .pg-variant__opts { display: flex; flex-wrap: wrap; gap: 6px; }
body.pages-v2-body .pg-opt { position: relative; display: inline-flex; }
body.pages-v2-body .pg-opt input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
body.pages-v2-body .pg-opt span {
  display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 36px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
  font-size: 13px; font-weight: 700; color: var(--pg-ink); cursor: pointer;
}
body.pages-v2-body .pg-opt span:hover { border-color: var(--pg-ink); }
body.pages-v2-body .pg-opt input:checked + span { background: var(--blue-700); border-color: var(--blue-700); color: #fff; }
body.pages-v2-body .pg-opt input:focus-visible + span { outline: 3px solid var(--pg-ink); outline-offset: 2px; }

@media (prefers-reduced-motion: no-preference) {
  body.pages-v2-body .pg-kit,
  body.pages-v2-body .pg-pr { transition: transform .35s var(--pg-ease); }
  body.pages-v2-body .pg-kit:hover { transform: translateY(-6px); }
  body.pages-v2-body .pg-pr:hover { transform: translateY(-4px); }
  body.pages-v2-body .pg-kit__img > img,
  body.pages-v2-body .pg-pr__img > img { transition: transform .5s var(--pg-ease); }
  body.pages-v2-body .pg-kit:hover .pg-kit__img > img { transform: scale(1.05) rotate(-2deg); }
  body.pages-v2-body .pg-pr:hover .pg-pr__img > img { transform: scale(1.05); }
}

@media (max-width: 760px) {
  body.pages-v2-body .pg-shop__kits { margin-top: 32px; }
  body.pages-v2-body .pg-kits {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--pg-gutter) * -1); padding-inline: var(--pg-gutter); padding-bottom: 8px;
  }
  body.pages-v2-body .pg-kits::-webkit-scrollbar { display: none; }
  body.pages-v2-body .pg-kit { flex: 0 0 78%; scroll-snap-align: start; padding: 20px; }
  body.pages-v2-body .pg-kit__img { height: 230px; }

  body.pages-v2-body .pg-prods { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  body.pages-v2-body .pg-pr__body { padding: 12px; }
  body.pages-v2-body .pg-pr__name { font-size: 14px; }
  body.pages-v2-body .pg-pr__row { flex-direction: column; align-items: flex-start; gap: 6px; }
  body.pages-v2-body .pg-pr__add { height: 44px; font-size: 13px; padding: 0 10px; }
}

/* ============================ CART & CHECKOUT ========================= */
/* Board block "cart" (CartEn / CartPhone): the basket panel (.cl lines with
   today's stepper and remove forms, the total and the no-payment note)
   beside the delivery form, stacked under 960; the empty state is the
   board's "Other states" card. White product shots multiply into the light
   tile; in dark mode they sit as they are, as on the shop. */
body.pages-v2-body .pg-cart__alert { margin-bottom: 22px; }
body.pages-v2-body .pg-cart { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; align-items: start; }
body.pages-v2-body .pg-panel { background: var(--surface); border-radius: 26px; box-shadow: var(--shadow-raised); padding: 30px; }
body.pages-v2-body .pg-panel__title { margin: 0 0 6px; font-size: 24px; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; }
[dir="rtl"] body.pages-v2-body .pg-panel__title { letter-spacing: 0; }
body.pages-v2-body .pg-cart__count { font-size: 16px; font-weight: 600; color: var(--text-muted); }

body.pages-v2-body .pg-cl {
  display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; gap: 20px; align-items: start;
  padding: 22px 0; border-top: 1px solid var(--border);
}
body.pages-v2-body .pg-panel__title + .pg-cl { border-top: 0; }
body.pages-v2-body .pg-cl__img {
  position: relative; width: 104px; height: 104px; border-radius: 18px; overflow: hidden;
  background: var(--surface-2); display: flex; align-items: center; justify-content: center;
}
body.pages-v2-body .pg-cl__img > img { width: 84%; height: 84%; object-fit: contain; mix-blend-mode: multiply; }
[data-theme="dark"] body.pages-v2-body .pg-cl__img > img { mix-blend-mode: normal; }
body.pages-v2-body .pg-cl__img .pg-nophoto img { width: 36px; height: 36px; }
body.pages-v2-body .pg-cl__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
body.pages-v2-body .pg-cl__name { font-size: 17px; line-height: 1.3; }
body.pages-v2-body .pg-cl__var { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--text-muted); }
body.pages-v2-body .pg-cl__unit { font-size: 14px; color: var(--text-muted); }
body.pages-v2-body .pg-cl__ctl { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 8px; }
body.pages-v2-body .pg-cl__tot { font-size: 18px; font-weight: 700; white-space: nowrap; }

/* Today's stepper: one form, each button submits its own quantity. */
body.pages-v2-body .pg-qty {
  display: inline-flex; align-items: center; height: 44px; padding: 0 4px; margin: 0;
  border: 1px solid var(--border); border-radius: 999px;
}
body.pages-v2-body .pg-qty button {
  width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; color: var(--pg-ink);
}
body.pages-v2-body .pg-qty button:hover { background: var(--surface-2); }
body.pages-v2-body .pg-qty button[disabled] { opacity: .35; cursor: default; background: none; }
body.pages-v2-body .pg-qty output { min-width: 30px; text-align: center; font-weight: 700; }
body.pages-v2-body .pg-cl__ctl form { margin: 0; }
body.pages-v2-body .pg-rm {
  display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 6px;
  border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 700; color: var(--text-muted);
}
body.pages-v2-body .pg-rm:hover { color: var(--danger); }
body.pages-v2-body .pg-qty button:focus-visible,
body.pages-v2-body .pg-rm:focus-visible { outline: 3px solid var(--pg-ink); outline-offset: 2px; }

body.pages-v2-body .pg-ctot {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  margin-top: 4px; padding-top: 22px; border-top: 2px solid var(--text);
}
body.pages-v2-body .pg-ctot span { font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
[dir="rtl"] body.pages-v2-body .pg-ctot span { letter-spacing: 0; }
body.pages-v2-body .pg-ctot b { font-size: 34px; font-weight: 700; letter-spacing: -.02em; }
body.pages-v2-body .pg-cnote {
  display: flex; gap: 12px; margin: 20px 0 0; padding: 16px 18px; border-radius: 16px;
  background: var(--surface-2); color: var(--text); font-size: 14px;
}
body.pages-v2-body .pg-cnote > svg { width: 20px; height: 20px; flex: none; color: var(--pg-ink); }

/* The delivery form (board .fform / .fld). */
body.pages-v2-body .pg-fform { display: flex; flex-direction: column; gap: 18px; margin-top: 18px; }
body.pages-v2-body .pg-fld { display: flex; flex-direction: column; gap: 8px; }
body.pages-v2-body .pg-fld label { font-size: 13px; font-weight: 700; color: var(--text); }
body.pages-v2-body .pg-fld input,
body.pages-v2-body .pg-fld textarea {
  width: 100%; height: 52px; padding: 0 16px; outline: none;
  font: inherit; font-size: 16px; color: var(--text);
  background: var(--bg); border: 1px solid var(--border); border-radius: 14px;
}
body.pages-v2-body .pg-fld textarea { height: auto; min-height: 132px; padding: 14px 16px; resize: vertical; }
body.pages-v2-body .pg-fld textarea.pg-fld__sm { min-height: 88px; }
body.pages-v2-body .pg-fld input:focus,
body.pages-v2-body .pg-fld textarea:focus {
  border-color: var(--pg-ink); background: var(--surface);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--pg-ink) 16%, transparent);
}
body.pages-v2-body .pg-fld [aria-invalid="true"] { border-color: var(--danger); }
body.pages-v2-body .pg-fld__err { font-size: 13px; font-weight: 600; color: var(--danger); }
body.pages-v2-body .pg-fform .pg-btn { align-self: flex-start; }

/* The empty cart (board "Other states" .empty). */
body.pages-v2-body .pg-cempty {
  max-width: 640px; margin-inline: auto; padding: 44px;
  display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center;
  background: var(--surface); border-radius: 26px; box-shadow: var(--shadow-raised);
}
body.pages-v2-body .pg-cempty__icon,
body.pages-v2-body .pg-done__icon {
  width: 72px; height: 72px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--pg-ink);
}
body.pages-v2-body .pg-cempty__icon > svg,
body.pages-v2-body .pg-done__icon > svg { width: 30px; height: 30px; }
body.pages-v2-body .pg-cempty p { margin: 0; font-size: 18px; font-weight: 600; }

@media (max-width: 960px) {
  body.pages-v2-body .pg-cart { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  body.pages-v2-body .pg-panel { padding: 20px; }
  body.pages-v2-body .pg-cl { grid-template-columns: 76px minmax(0, 1fr); gap: 14px; }
  body.pages-v2-body .pg-cl__img { width: 76px; height: 76px; }
  body.pages-v2-body .pg-cl__tot { grid-column: 2; }
  body.pages-v2-body .pg-ctot b { font-size: 28px; }
  body.pages-v2-body .pg-cempty { padding: 32px 20px; }
}

/* ============================ NARROW CARD ============================= */
/* The text pages' single narrow card under the title band (order received,
   password reset and its done page, fantasy join): the board's panel at a
   reading width, centred. */
body.pages-v2-body .pg-narrow {
  max-width: 640px; margin-inline: auto; padding: 44px;
  background: var(--surface); border-radius: 26px; box-shadow: var(--shadow-raised);
}

/* Order received: the check, the thanks, the reference and the way back. */
body.pages-v2-body .pg-done { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
body.pages-v2-body .pg-done__title { margin: 4px 0 0; font-size: 28px; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; }
[dir="rtl"] body.pages-v2-body .pg-done__title { letter-spacing: 0; }
body.pages-v2-body .pg-done__body { margin: 0; max-width: 46ch; color: var(--text-muted); font-size: 16px; line-height: 1.6; }
body.pages-v2-body .pg-done__ref {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  margin: 6px 0 10px; padding: 16px 28px; border-radius: 16px; background: var(--surface-2);
}
body.pages-v2-body .pg-done__ref span { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); }
[dir="rtl"] body.pages-v2-body .pg-done__ref span { letter-spacing: 0; }
body.pages-v2-body .pg-done__ref strong { font-size: 22px; font-weight: 700; letter-spacing: .04em; color: var(--pg-ink); font-variant-numeric: tabular-nums; }

/* Password reset: today's form in the card; the hint under the password. */
body.pages-v2-body .pg-narrow .pg-fform { margin-top: 0; }
body.pages-v2-body .pg-fld__hint { font-size: 13px; color: var(--text-muted); }

/* Fantasy join: the league code, large and letter-spaced, always LTR; the
   store badges (site.css's .footer__badges / .storesoon) centred under it. */
body.pages-v2-body .pg-fjcode {
  margin: 0; padding: 18px 28px; border-radius: 16px; background: var(--surface-2);
  font-size: 34px; line-height: 1.1; font-weight: 700; letter-spacing: .3em; text-indent: .3em; color: var(--pg-ink);
  font-variant-numeric: tabular-nums;
}
body.pages-v2-body .pg-done .footer__badges { margin-top: 4px; flex-wrap: wrap; justify-content: center; gap: 14px; }

@media (max-width: 760px) {
  body.pages-v2-body .pg-narrow { padding: 32px 20px; }
  body.pages-v2-body .pg-fjcode { font-size: 28px; padding: 16px 20px; }
  body.pages-v2-body .pg-done__title { font-size: 24px; }
}

/* ============================ FANS ==================================== */
/* Board block "fans" (FansEn / FansPhone). Tickets: the navy panel holds
   today's ticket types (name, QAR price, period) or, with none active,
   today's message in the board's large type; beside it the three notes as
   check rows and the matchday line. The board's dashed cards were a picture
   of the data, so the real cards take a solid hairline. Social: one navy
   card per social URL, on white. */
body.pages-v2-body .pg-tk { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px; align-items: start; }
body.pages-v2-body .pg-tk__now {
  position: relative; overflow: hidden; isolation: isolate; border-radius: 26px; padding: 40px;
  display: flex; flex-direction: column; gap: 18px;
  background: linear-gradient(135deg, #1E427A, #0E2547); color: #fff; box-shadow: var(--shadow-hero);
}
body.pages-v2-body .pg-tk__now::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .12; mix-blend-mode: screen;
  background: url("../images/brand/pattern-fanar-fill-full.svg") center / 520px repeat;
}
body.pages-v2-body .pg-tk__msg { margin: 0; font-size: 28px; line-height: 1.25; font-weight: 700; letter-spacing: -.015em; max-width: 24ch; }
[dir="rtl"] body.pages-v2-body .pg-tk__msg { letter-spacing: 0; line-height: 1.45; }
body.pages-v2-body .pg-tk__types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
body.pages-v2-body .pg-tt {
  display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 16px;
  background: rgba(255, 255, 255, .06); border: 1.5px solid rgba(255, 255, 255, .22);
  font-size: 13px; color: var(--on-hero-muted);
}
body.pages-v2-body .pg-tt__price { color: #fff; font-size: 15px; font-weight: 700; }
body.pages-v2-body .pg-tk__side { display: flex; flex-direction: column; gap: 14px; }
body.pages-v2-body .pg-checks { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
body.pages-v2-body .pg-checks li {
  display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: center; padding: 18px 20px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px; font-size: 16px; font-weight: 600;
}
body.pages-v2-body .pg-checks i {
  width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--pg-ink);
}

/* Follow: on white, meeting the footer as the Club page's address band does. */
body.pages-v2-body .pg-sec--social { background: var(--surface); }
body.pages-v2-body main:not(.pg-tabbed):has(> .pg-sec--social:last-child) + .footer,
body.pages-v2-body main.pg-tabbed:has(> .pg-sec--social.is-current:last-child) + .footer { margin-top: 0; }
body.pages-v2-body .pg-socg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
body.pages-v2-body .pg-soct {
  position: relative; overflow: hidden; isolation: isolate; border-radius: 26px; padding: 30px; min-height: 300px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
  background: var(--blue-900); color: #fff; box-shadow: var(--shadow-raised);
}
body.pages-v2-body .pg-soct::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(320px 240px at 100% 0%, rgba(46, 84, 144, .7), transparent 70%);
}
[dir="rtl"] body.pages-v2-body .pg-soct::before { background: radial-gradient(320px 240px at 0% 0%, rgba(46, 84, 144, .7), transparent 70%); }
body.pages-v2-body .pg-soct__big { position: absolute; inset-inline-end: -30px; bottom: -40px; width: 200px; height: 200px; opacity: .07; z-index: -1; }
body.pages-v2-body .pg-soct__big svg { width: 100%; height: 100%; }
body.pages-v2-body .pg-soct__gl {
  width: 64px; height: 64px; border-radius: 20px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18);
}
body.pages-v2-body .pg-soct__gl svg { width: 30px; height: 30px; }
body.pages-v2-body .pg-soct b { display: block; font-size: 26px; font-weight: 700; letter-spacing: -.015em; }
[dir="rtl"] body.pages-v2-body .pg-soct b { letter-spacing: 0; }
body.pages-v2-body .pg-soct span[dir="ltr"] { display: block; margin-top: 4px; color: var(--on-hero-muted); font-size: 14px; overflow-wrap: anywhere; }
body.pages-v2-body .pg-soct .pg-btn { height: 46px; align-self: flex-start; }
[dir="rtl"] body.pages-v2-body .pg-soct span[dir="ltr"] { text-align: right; }

@media (prefers-reduced-motion: no-preference) {
  body.pages-v2-body .pg-soct { transition: transform .35s var(--pg-ease); }
  body.pages-v2-body .pg-soct:hover { transform: translateY(-6px); }
}

@media (max-width: 960px) {
  body.pages-v2-body .pg-socg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  body.pages-v2-body .pg-tk { grid-template-columns: 1fr; }
  body.pages-v2-body .pg-tk__now { padding: 26px; }
  body.pages-v2-body .pg-tk__msg { font-size: 22px; }
  body.pages-v2-body .pg-tk__types { grid-template-columns: 1fr; }
  body.pages-v2-body .pg-socg { gap: 12px; }
  body.pages-v2-body .pg-soct { min-height: 220px; padding: 20px; border-radius: 22px; }
  body.pages-v2-body .pg-soct b { font-size: 19px; }
  body.pages-v2-body .pg-soct span[dir="ltr"] { font-size: 12px; word-break: break-all; }
  body.pages-v2-body .pg-soct .pg-btn { height: 44px; padding: 0 14px; font-size: 13px; }
  body.pages-v2-body .pg-soct__gl { width: 52px; height: 52px; }
}

/* ============================ APP ===================================== */
/* Board block "app" (AppEn / AppPhone). "Download it" beside the phone
   mock-up (spec ruling 15: a static picture, no member or match data; drawn
   after site-home.css's .hv-phone, which interior pages do not load); the
   seven features with the membership card as the navy lead; the
   screenshots in device frames on white under a filled ghost word; then the
   navy "Already a member?" card. Today's store badges keep site.css's
   .footer__badges / .storesoon. */
body.pages-v2-body .pg-sec--flush { padding-top: 0; }
body.pages-v2-body .pg-get { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 64px; align-items: center; }
body.pages-v2-body .pg-get__text { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
body.pages-v2-body .pg-get__text p { margin: 0; color: var(--text-muted); font-size: 18px; max-width: 54ch; }
body.pages-v2-body .pg-get__text .footer__badges { margin-top: 0; flex-wrap: wrap; gap: 14px; }

/* The phone. Its frame stays navy in both themes; the screen follows the theme. */
body.pages-v2-body .pg-phone {
  position: relative; justify-self: center; width: 300px; height: 600px; overflow: hidden;
  border-radius: 44px; background: var(--blue-900); border: 8px solid var(--blue-800);
  box-shadow: 0 40px 80px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .08);
}
body.pages-v2-body .pg-phone::before {
  content: ""; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 3;
  width: 100px; height: 26px; border-radius: 14px; background: var(--blue-900);
}
body.pages-v2-body .pg-phone__scr {
  position: absolute; inset: 0; background: var(--bg); color: var(--text);
  display: flex; flex-direction: column; gap: 14px; padding: 54px 16px 16px; font-size: 12px;
}
body.pages-v2-body .pg-mcard {
  position: relative; overflow: hidden; isolation: isolate; border-radius: 20px; padding: 18px; min-height: 170px;
  display: flex; flex-direction: column; justify-content: space-between;
  background: linear-gradient(135deg, #1E427A, #0E2547); color: #fff;
}
body.pages-v2-body .pg-mcard::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .25; mix-blend-mode: screen;
  background: url("../images/brand/pattern-fanar-fill-full.svg") center / 300px repeat;
}
body.pages-v2-body .pg-mcard__t,
body.pages-v2-body .pg-mcard__b { display: flex; justify-content: space-between; gap: 10px; }
body.pages-v2-body .pg-mcard__t { align-items: center; }
body.pages-v2-body .pg-mcard__b { align-items: flex-end; }
body.pages-v2-body .pg-mcard__t img { height: 26px; width: auto; filter: brightness(0) invert(1); }
body.pages-v2-body .pg-mcard__t span { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
body.pages-v2-body .pg-mcard__b b { display: block; font-size: 14px; }
body.pages-v2-body .pg-mcard__b small { display: block; margin-top: 2px; font-size: 10px; letter-spacing: .1em; color: var(--on-hero-muted); }
[dir="rtl"] body.pages-v2-body .pg-mcard__t span { letter-spacing: 0; }
body.pages-v2-body .pg-qr {
  flex: none; width: 54px; height: 54px; padding: 5px; border-radius: 8px; background: #fff;
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px;
}
body.pages-v2-body .pg-qr i { background: var(--blue-900); border-radius: 1px; }
body.pages-v2-body .pg-qr i.o { background: transparent; }
body.pages-v2-body .pg-phone__btn {
  display: flex; align-items: center; justify-content: center; height: 40px; border-radius: 12px;
  background: var(--blue-700); color: #fff; font-size: 13px; font-weight: 700;
}
body.pages-v2-body .pg-phone__row {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 14px;
  background: var(--surface); box-shadow: var(--shadow-raised);
}
body.pages-v2-body .pg-phone__row b { font-size: 13px; }
body.pages-v2-body .pg-phone__row span { color: var(--text-muted); font-size: 11px; }
body.pages-v2-body .pg-phone__nav {
  margin-top: auto; display: flex; justify-content: space-around; padding: 10px; border-radius: 16px;
  background: var(--surface); box-shadow: var(--shadow-raised);
}
body.pages-v2-body .pg-phone__nav span { width: 28px; height: 4px; border-radius: 2px; background: var(--blue-100); }
body.pages-v2-body .pg-phone__nav span.is-active { background: var(--pg-ink); }

/* Features. */
body.pages-v2-body .pg-feats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 18px; }
body.pages-v2-body .pg-ft {
  display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: 22px;
  background: var(--surface); box-shadow: var(--shadow-raised);
}
body.pages-v2-body .pg-ft > i {
  width: 56px; height: 56px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--pg-ink);
}
body.pages-v2-body .pg-ft__title { margin: 0; font-size: 19px; font-weight: 700; }
body.pages-v2-body .pg-ft p { margin: 0; color: var(--text-muted); font-size: 15px; }
body.pages-v2-body .pg-ft--lead {
  grid-column: span 2; position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(135deg, #1E427A, #0E2547); color: #fff;
}
body.pages-v2-body .pg-ft--lead::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .3; pointer-events: none;
  background: url("../images/brand/pattern-fanar-line-right.svg") 115% 50% / 460px no-repeat;
}
[dir="rtl"] body.pages-v2-body .pg-ft--lead::before { transform: scaleX(-1); }
body.pages-v2-body .pg-ft--lead > i { background: rgba(255, 255, 255, .1); color: var(--gold); }
body.pages-v2-body .pg-ft--lead .pg-ft__title { font-size: 28px; }
body.pages-v2-body .pg-ft--lead p { color: var(--on-hero-muted); font-size: 17px; max-width: 46ch; }

/* Screens: white band, a filled ghost word, the five shots in frames. */
body.pages-v2-body .pg-sec--shots { background: var(--surface); overflow: hidden; }
body.pages-v2-body .pg-secghost {
  position: absolute; inset-inline-start: -8px; top: -30px; pointer-events: none; user-select: none; white-space: nowrap;
  font-size: 220px; line-height: 1; font-weight: 700; letter-spacing: -.04em; text-transform: uppercase;
  color: rgba(30, 66, 122, .05);
}
[data-theme="dark"] body.pages-v2-body .pg-secghost { color: rgba(255, 255, 255, .04); }
[dir="rtl"] body.pages-v2-body .pg-secghost { letter-spacing: 0; }
body.pages-v2-body .pg-shots { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
body.pages-v2-body .pg-shot { margin: 0; display: flex; flex-direction: column; gap: 16px; align-items: center; text-align: center; }
body.pages-v2-body .pg-shot__f {
  width: 100%; max-width: 260px; aspect-ratio: 460 / 1000; overflow: hidden;
  border-radius: 34px; background: var(--blue-900); border: 7px solid var(--blue-800); box-shadow: var(--shadow-hero);
}
body.pages-v2-body .pg-shot__f img { display: block; width: 100%; height: 100%; object-fit: cover; }
body.pages-v2-body .pg-shot figcaption { font-size: 15px; font-weight: 600; max-width: 24ch; }

/* Members: the navy card (home's app band shape) with the badges. */
body.pages-v2-body .pg-appcta {
  position: relative; overflow: hidden; isolation: isolate; border-radius: 32px; padding: 72px 64px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: center;
  background: radial-gradient(900px 500px at 15% 10%, #2E5490 0%, transparent 60%), linear-gradient(135deg, #143257, #0E2547);
  color: var(--on-hero); box-shadow: var(--shadow-hero);
}
body.pages-v2-body .pg-appcta::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .12; mix-blend-mode: screen; pointer-events: none;
  background: url("../images/brand/pattern-fanar-fill-full.svg") center / 700px repeat;
}
body.pages-v2-body .pg-appcta__text { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
body.pages-v2-body .pg-appcta .pg-eyebrow { color: var(--gold); }
body.pages-v2-body .pg-appcta .pg-eyebrow::before { background: var(--gold); }
body.pages-v2-body .pg-appcta .pg-h2 { color: #fff; font-size: 48px; }
body.pages-v2-body .pg-appcta p { margin: 0; color: var(--on-hero-muted); font-size: 17px; max-width: 52ch; }
body.pages-v2-body .pg-appcta .footer__badges { margin-top: 0; flex-wrap: wrap; }

@media (prefers-reduced-motion: no-preference) {
  body.pages-v2-body .pg-ft { transition: transform .35s var(--pg-ease); }
  body.pages-v2-body .pg-ft:hover { transform: translateY(-4px); }
}

@media (max-width: 960px) {
  body.pages-v2-body .pg-shots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  body.pages-v2-body .pg-get { grid-template-columns: 1fr; gap: 36px; }
  body.pages-v2-body .pg-get__text p { font-size: 16px; }
  body.pages-v2-body .pg-phone { width: 260px; height: 520px; }
  body.pages-v2-body .pg-ft--lead { grid-column: auto; }
  body.pages-v2-body .pg-ft--lead .pg-ft__title { font-size: 22px; }
  body.pages-v2-body .pg-secghost { font-size: 110px; top: -18px; }
  body.pages-v2-body .pg-shots {
    display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--pg-gutter)); padding-inline: var(--pg-gutter);
    scroll-padding-inline: var(--pg-gutter);
  }
  body.pages-v2-body .pg-shots::-webkit-scrollbar { display: none; }
  body.pages-v2-body .pg-shot { flex: 0 0 62%; scroll-snap-align: start; }
  body.pages-v2-body .pg-appcta { grid-template-columns: 1fr; padding: 40px 24px; border-radius: 26px; gap: 28px; }
  body.pages-v2-body .pg-appcta .pg-h2 { font-size: 34px; }
}

/* ============================ CONTACT ================================= */
/* Board block "contact" (ContactEn / ContactAr / ContactPhone): today's form
   in the cart's form card (.pg-panel / .pg-fform / .pg-fld), the sent state
   under it, and the club page's contact rows and map beside it. */
body.pages-v2-body .pg-ct { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 28px; align-items: start; }
body.pages-v2-body .pg-ct__side { display: flex; flex-direction: column; gap: 22px; }
/* The bot trap's wrapper keeps today's left:-9999px. In Arabic that offset
   is on the scrollable side and today's page scrolls ~10,000px sideways;
   the form card contains it instead. */
body.pages-v2-body .pg-ct__form { position: relative; overflow: hidden; }
body.pages-v2-body .pg-ct .pg-map { min-height: 300px; }
body.pages-v2-body .pg-ct__sent { margin-top: 28px; }
body.pages-v2-body .pg-fld label small { font-size: 13px; font-weight: 500; color: var(--text-muted); }

@media (max-width: 760px) {
  body.pages-v2-body .pg-ct { grid-template-columns: minmax(0, 1fr); }
  body.pages-v2-body .pg-ct .pg-map { min-height: 240px; }
}

/* ============================ LEGAL =================================== */
/* Board block "legal" (LegalEn / LegalPhone): the contents rail beside the
   numbered sections. The rail sticks under the masthead from 960 px and is
   not shown below it (spec ruling 16); site-pages.js's sub-nav spy marks
   the section in view. */
body.pages-v2-body .pg-legal { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 72px; align-items: start; }
body.pages-v2-body .pg-legal__rail {
  position: sticky; top: calc(var(--pg-mast-h) + 24px);
  max-height: calc(100vh - var(--pg-mast-h) - 48px); overflow-y: auto;
  background: var(--surface); border-radius: 22px; box-shadow: var(--shadow-raised); padding: 22px;
}
body.pages-v2-body .pg-legal__toc { display: flex; flex-direction: column; }
body.pages-v2-body .pg-legal__toc-title {
  margin: 0 10px 10px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-muted); font-weight: 700;
}
body.pages-v2-body .pg-legal__link,
body.pages-v2-body .pg-legal__link:hover {
  display: grid; grid-template-columns: 28px 1fr; gap: 8px; padding: 9px 10px; border-radius: 10px;
  font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--text); text-decoration: none;
}
body.pages-v2-body .pg-legal__link b { color: var(--blue-400); font-weight: 700; }
body.pages-v2-body .pg-legal__link:hover { background: var(--bg); }
body.pages-v2-body .pg-legal__link.is-active { background: var(--surface-2); color: var(--pg-ink); }
body.pages-v2-body .pg-legal__doc { display: flex; flex-direction: column; gap: 44px; max-width: 76ch; }
body.pages-v2-body .pg-legal__sec { display: flex; flex-direction: column; gap: 14px; scroll-margin-top: calc(var(--pg-mast-h) + 24px); }
body.pages-v2-body .pg-legal__h {
  display: flex; gap: 16px; align-items: baseline; margin: 0;
  font-size: 26px; line-height: 1.2; font-weight: 700; letter-spacing: -.01em;
}
body.pages-v2-body .pg-legal__h b { font-size: 15px; color: var(--blue-400); font-weight: 700; letter-spacing: .06em; min-width: 30px; }
body.pages-v2-body .pg-legal__doc p,
body.pages-v2-body .pg-legal__doc li { margin: 0; font-size: 17px; line-height: 1.75; color: var(--text); }
body.pages-v2-body .pg-legal__list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
body.pages-v2-body .pg-legal__list li { display: grid; grid-template-columns: 20px 1fr; gap: 8px; }
body.pages-v2-body .pg-legal__list li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--pg-ink); margin-top: .75em; }
body.pages-v2-body .pg-legal__intro { font-size: 20px; line-height: 1.6; color: var(--text); }
body.pages-v2-body .pg-legal__doc a { color: var(--pg-ink); font-weight: 700; }
[dir="rtl"] body.pages-v2-body .pg-legal__doc p,
[dir="rtl"] body.pages-v2-body .pg-legal__doc li,
[dir="rtl"] body.pages-v2-body .pg-legal__intro { line-height: 1.95; }
[dir="rtl"] body.pages-v2-body .pg-legal__h,
[dir="rtl"] body.pages-v2-body .pg-legal__h b,
[dir="rtl"] body.pages-v2-body .pg-legal__toc-title { letter-spacing: 0; }

@media (max-width: 959px) {
  body.pages-v2-body .pg-legal { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  body.pages-v2-body .pg-legal__rail { display: none; }
}
@media (max-width: 760px) {
  body.pages-v2-body .pg-legal__doc { gap: 32px; }
  body.pages-v2-body .pg-legal__h { font-size: 21px; }
  body.pages-v2-body .pg-legal__doc p,
  body.pages-v2-body .pg-legal__doc li { font-size: 16px; }
  body.pages-v2-body .pg-legal__intro { font-size: 17px; }
}