/* xG Simple theme styles (ported from design/preview/xgsimple.css, which stays as the design reference).
   Mobile first, one accent colour, system fonts, no JavaScript.
   Every rule is scoped under .xgs. Breakpoints: 40rem (tablet), 56rem and 64rem (desktop). */

.xgs {
  --xgs-bg: #FCFCFC;
  --xgs-ink: #202d34;        /* body text */
  --xgs-head: #1c1e20;       /* headings */
  --xgs-mute: #485963;       /* secondary text */
  --xgs-line: rgba(72, 89, 99, .22);
  --xgs-accent: var(--ghost-accent-color, #C2410C);   /* set once in Ghost: Settings > Design > Brand */

  background: var(--xgs-bg);
  color: var(--xgs-ink);
  color-scheme: light;       /* stay white even if the theme offers a dark mode */
  font: 400 1.0625rem/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}
.xgs *, .xgs *::before, .xgs *::after { box-sizing: border-box; }
.xgs-wrap { max-width: 72rem; margin: 0 auto; padding: 0 1.25rem; }

/* ---- top bar ---- */
.xgs-top { display: flex; justify-content: space-between; align-items: center; padding: .75rem 0; }
.xgs-mark img { display: block; width: auto; height: 88px; }   /* the logo (design/logo/svg/xg-simple-logo.svg) */
.xgs-mark { font-weight: 700; font-size: 1.125rem; letter-spacing: -.01em; color: var(--xgs-head); text-decoration: none; }
.xgs-mark b { color: var(--xgs-accent); font-weight: 700; }
/* Sign in: an outlined button, so it stays quieter than the filled Subscribe button */
.xgs-signin {
  display: inline-block; min-height: 2.5rem; padding: .5rem 1.125rem; border: 1px solid var(--xgs-mute); border-radius: .5rem;
  color: var(--xgs-ink); font-size: .9375rem; font-weight: 600; line-height: 1.4; text-decoration: none;
}
.xgs-signin:hover { background: var(--xgs-ink); border-color: var(--xgs-ink); color: #fff; }
.xgs-topnav { display: flex; align-items: center; gap: 1rem; }
@media (min-width: 40rem) { .xgs-topnav { gap: 2rem; } }   /* tablets and desktops: more air between the menu items */
.xgs-navlink { color: var(--xgs-ink); font-size: .9375rem; font-weight: 600; line-height: 1.4; text-decoration: none; }
.xgs-navlink:hover { color: var(--xgs-accent); text-decoration: underline; text-underline-offset: .25em; }

/* ---- hero ---- */
.xgs-hero { display: flex; flex-direction: column; align-items: center; padding: 3rem 0 3rem; }
/* The hero block (headline, subline, buttons) sits in the middle of the page while its text stays left-aligned.
   The headline has a fixed line break, so the block is as wide as its longer line (or the buttons, if they are
   wider); the subline follows that width instead of widening the block. */
.xgs-hero-text { width: max-content; max-width: 100%; }
.xgs-hero h1 {
  margin: 0 0 1rem; color: var(--xgs-head); font-weight: 700;
  font-size: clamp(2.125rem, 8vw, 3.5rem); line-height: 1.08; letter-spacing: -.03em;
  text-wrap: balance;        /* no lonely last word; older browsers simply wrap normally */
}
.xgs-sub { margin: 0 0 2rem; width: 0; min-width: 100%; color: var(--xgs-mute); font-size: 1.1875rem; line-height: 1.5; text-wrap: balance; }
.xgs-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
/* On phones the block is a fixed, narrow width (the same as the price block), otherwise the subline and the buttons make it
   as wide as the screen and its left-aligned text hugs the left edge instead of sitting in the middle. */
@media (max-width: 39.99rem) { .xgs-hero-text { width: min(100%, 18rem); } }

/* shot-map illustration (design/make_pitch.py draws pitch.svg: same background as the page, heat colours as in the
   original). Small, under the text on phones and next to the headline on desktop. */
.xgs-pitch { width: min(100%, 12rem); margin: 2.5rem 0 0; }
.xgs-pitch img { display: block; width: 100%; height: auto; }
/* On phones the pitch moves out of the hero (it takes a lot of room there, and the logo in the header already shows
   it) and into "Why xG Simple" instead, above its heading, where it breaks up the page. From 40rem it is back in the hero and the copy
   in "Why" is hidden. */
.xgs-pitch--why { margin: 0 auto 1.75rem; }
@media (max-width: 39.99rem) { .xgs-hero .xgs-pitch { display: none; } }
@media (min-width: 40rem) { .xgs-pitch--why { display: none; } }

/* ---- button and links ---- */
.xgs-btn {
  display: inline-block; min-height: 3rem; padding: .875rem 1.5rem; border-radius: .5rem;
  background: var(--xgs-accent); color: #fff; font-weight: 600; line-height: 1.2; text-decoration: none;
}
.xgs-btn:hover { filter: brightness(.92); }
.xgs a:focus-visible { outline: 3px solid var(--xgs-ink); outline-offset: 3px; border-radius: .25rem; }
.xgs-link { color: var(--xgs-ink); text-decoration: underline; text-underline-offset: .2em; }
.xgs-link:hover { color: var(--xgs-accent); }

/* ---- sections: heading group + body (stacked on phones, side by side on desktop) ---- */
.xgs-sec { padding: 4rem 0; border-top: 1px solid var(--xgs-line); }
.xgs-sec-head { margin-bottom: 1rem; }
.xgs-sec h2 { margin: 0; color: var(--xgs-head); font-size: 1.375rem; font-weight: 700; line-height: 1.25; letter-spacing: -.015em; }
.xgs-cap { margin: 0 0 1rem; color: var(--xgs-mute); font-size: .9375rem; }

/* sample table: the markup comes from the script (inline styles), so a table can be swapped in directly.
   One row per match, all seven columns. On phones the cells get tighter and may wrap; if the table is still
   wider than the screen it scrolls sideways inside its own box. (!important beats the inline styles.) */
.xgs-table { margin: 0; }
.xgs-table table { width: 100%; }
/* every column is centred, so each value sits right under its header (the script's table aligns text left and numbers right) */
.xgs-table th, .xgs-table td { text-align: center !important; }
/* The script marks each team with the number of games behind its figures. The landing page does not show it
   (it is explained elsewhere), and this also hides it in any table pasted in from the script's output. */
.xgs-table span[title^="Based on"] { display: none !important; }

/* Teaser: two blurred placeholder rows (made-up values, see build_preview.py) under the real rows, fading out
   into the page. Blurred with a text shadow so it works the same in every browser; the real rows stay sharp. */
.xgs-table--teaser { position: relative; }
.xgs-locked td { color: transparent !important; text-shadow: 0 0 7px rgba(32, 45, 52, .65) !important; user-select: none; pointer-events: none; }
.xgs-table--teaser::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4.25rem; pointer-events: none;
  background: linear-gradient(to bottom, rgba(252, 252, 252, 0), var(--xgs-bg) 88%);
}

/* Call to action on top of the blurred rows */
.xgs-teaser-cta {
  position: absolute; left: 50%; bottom: 1.25rem; z-index: 1; transform: translateX(-50%);
  min-height: 2.5rem; padding: .5rem 1.125rem; font-size: .9375rem; white-space: nowrap;
  box-shadow: 0 2px 12px rgba(32, 45, 52, .2);
}
button.xgs-btn { border: 0; font: inherit; font-weight: 600; line-height: 1.2; cursor: pointer; }
.xgs-cta-short { display: none; }
@media (max-width: 39.99rem) {   /* phones get the shorter text */
  .xgs-cta-long { display: none; }
  .xgs-cta-short { display: inline; }
  .xgs-teaser-cta { width: max-content; max-width: calc(100% - 1rem); white-space: normal; text-align: center; }
  /* the button sits lower than on desktop, over the second blurred row;
     the fade ends where the rows end */
  .xgs-teaser-cta { position: relative; left: auto; bottom: auto; transform: none; display: block; margin: -2.375rem auto 0; }
  .xgs-table--teaser::after { bottom: .125rem; }
}
.xgs-teaser-cta span[aria-hidden="true"] { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }   /* the lock only, not the text spans */

/* Emojis in the header row, for a bit of life. Added here as generated content, so the script's table needs no
   change and a pasted table gets them too. The second `content` line marks them as decoration for screen readers
   (browsers that do not know that syntax keep the first line). On phones and tablets the emoji sits above the label,
   from 71rem (about 1136 px) in front of it. */
.xgs-table th::before {
  display: block; margin: 0 0 .15em; font-weight: 400; line-height: 1.2;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
.xgs-table th:nth-child(1)::before { content: "\1F3C5"; content: "\1F3C5" / ""; }          /* medal      Rank */
.xgs-table th:nth-child(2)::before { content: "\1F3DF\FE0F"; content: "\1F3DF\FE0F" / ""; }   /* stadium    Home team */
.xgs-table th:nth-child(3)::before { content: "\2708\FE0F"; content: "\2708\FE0F" / ""; }  /* aeroplane  Away team */
.xgs-table th:nth-child(4)::before { content: "\1F3C6"; content: "\1F3C6" / ""; }          /* trophy     League */
.xgs-table th:nth-child(5)::before { content: "\26BD"; content: "\26BD" / ""; }            /* football   Home xG */
.xgs-table th:nth-child(6)::before { content: "\26BD"; content: "\26BD" / ""; }            /* football   Away xG */
.xgs-table th:nth-child(7)::before { content: "\1F3AF"; content: "\1F3AF" / ""; }          /* target     Match xG */
@media (min-width: 71rem) {
  .xgs-table th::before { display: inline-block; margin: 0 .4em 0 0; }
}

/* sample table: the markup comes from the script (inline styles). One row per match; on phones the cells get tighter
   and may wrap. (!important beats the inline styles.) */
@media (max-width: 39.99rem) {
  .xgs-table table { min-width: 0 !important; font-size: .8125rem !important; }
  .xgs-table th, .xgs-table td { padding: .5rem .3125rem !important; }
  .xgs-table th:nth-child(4), .xgs-table td:nth-child(4) { display: none !important; }   /* League: hidden on phones so Match xG stays in view */
  .xgs-table th:nth-child(1), .xgs-table td:nth-child(1) { display: none !important; }   /* Rank: hidden on phones too (the order is the rank), which gives the names and the xG columns more room */
  .xgs-table th { white-space: normal !important; }
  .xgs-table td { white-space: normal !important; }
  .xgs-table td:nth-child(1), .xgs-table td:nth-child(n+5) { white-space: nowrap !important; }
  /* "Home team" / "Away team" become "Home" / "Away" (table-headers.js; the cut-off word stays for screen readers), and
     the emoji sits beside the first word of every header. Where it does not fit a cell it wraps above the word. */
  .xgs-table th .xgs-team-word {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .xgs-table th.xgs-short::before { display: inline-block; margin: 0 .2em 0 0; font-size: .85em; }
  /* the full weekly tables have long team names (Paris Saint-Germain, Manchester United): a little tighter still */
  .gh-content .xgs-table table { font-size: .75rem !important; }
  .gh-content .xgs-table th, .gh-content .xgs-table td { padding: .5rem .1875rem !important; }
  /* fixed column widths (League and Rank are hidden, so five columns): the table can never be wider than the screen, and a very
     long name is hyphenated or broken instead of pushing the table sideways */
  .gh-content .xgs-table table { table-layout: fixed !important; width: 100% !important; }
  .gh-content .xgs-table th:nth-child(2), .gh-content .xgs-table th:nth-child(3) { width: 25.25%; }
  .gh-content .xgs-table th:nth-child(5), .gh-content .xgs-table th:nth-child(6) { width: 16%; }
  .gh-content .xgs-table th:nth-child(7) { width: 17.5%; }
  .gh-content .xgs-table th { font-size: .6875rem; padding-left: .125rem !important; padding-right: .125rem !important; }
  .gh-content .xgs-table td { hyphens: auto; overflow-wrap: break-word; }
}
@media (min-width: 40rem) and (max-width: 47.99rem) {   /* small tablets: a little tighter, all columns stay */
  .xgs-table th, .xgs-table td { padding: .5rem .4375rem !important; }
}
@media (max-width: 23.5rem) {   /* the narrowest phones (about 360 px) */
  .xgs-table table { font-size: .75rem !important; }
  .xgs-table th, .xgs-table td { padding: .5rem .25rem !important; }
}

/* members list */
.xgs-list { margin: 0; padding: 0; list-style: none; max-width: 40rem; }
.xgs-list li { position: relative; margin: 0 0 .75rem; padding-left: 1.5rem; }
.xgs-list li::before { content: ""; position: absolute; left: 0; top: .6em; width: .5rem; height: .5rem; border-radius: 2px; background: var(--xgs-accent); }

/* price */
/* the price and the line about what it covers sit side by side, the first line of text level with "per month"; on narrow screens the line wraps below the price */
.xgs-price-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem 1.5rem; margin: 0 0 1.5rem; }
.xgs-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .5rem; margin: 0; }
.xgs-price strong { color: var(--xgs-head); font-size: 3rem; font-weight: 700; line-height: 1; letter-spacing: -.03em; }
.xgs-price span { color: var(--xgs-mute); }
.xgs-price-note { flex: 1 1 14rem; margin: 0; max-width: 28rem; color: var(--xgs-mute); line-height: 1.5; text-wrap: balance; }
/* Beside the price (from 40rem, where it always fits) the text takes no height of its own: its first line stays level
   with "per month" and the rest hangs below, so the Subscribe button sits where it would with a one-line text.
   On phones the text wraps below the price and keeps its height. */
@media (min-width: 40rem) { .xgs-price-note { height: 0; } }
/* Below 64rem the sections are stacked, and Price sits in the middle of the page as one block (heading, price, button)
   while its text stays left-aligned, like the hero. The grid column is as wide as its widest child. From 64rem it
   follows the two-column layout of the other sections. */
@media (max-width: 63.99rem) { .xgs-sec--price { display: grid; justify-content: center; } }
/* On phones the block is a fixed, narrow width, otherwise its line of text makes it as wide as the screen. */
@media (max-width: 39.99rem) { .xgs-sec--price { grid-template-columns: min(100%, 18rem); } .xgs-price-note { text-wrap: wrap; } }   /* the text fills the block's width, so its right edge is level with the hero's */

/* what the numbers mean */
.xgs-terms { margin: 0; max-width: 44rem; }
.xgs-terms dt { margin: 1.25rem 0 .125rem; color: var(--xgs-head); font-weight: 600; }
.xgs-terms dt:first-child { margin-top: 0; }
.xgs-terms dd { margin: 0; color: var(--xgs-mute); }

/* accent-coloured word inside a heading (the same colour as "xG" in the logo) */
.xgs-accent { color: var(--xgs-accent); }

/* running text (Why xG Simple) */
.xgs-prose { max-width: 40rem; }
.xgs-prose p { margin: 0 0 1.125rem; text-wrap: pretty; }   /* avoids a lone last word where supported */
.xgs-prose p:last-child { margin-bottom: 0; }
@media (max-width: 39.99rem) {   /* phones: a full line and a half between paragraphs */
  .xgs-prose p { margin-bottom: 1.5rem; }
  .xgs-prose p:last-child { margin-bottom: 0; }
  .xgs-prose.gh-content > * + * { margin-top: 1.5rem; }
  .xgs-terms dt, .xgs-terms dt:first-child { margin-top: 1.5rem; }
  .xgs-terms dt:first-child { margin-top: 0; }
  .xgs-list li { margin-bottom: 1rem; }
}
.xgs-prose .xgs-callout {
  margin: 1.75rem 0; padding-left: 1rem; border-left: 3px solid var(--xgs-accent);
  color: var(--xgs-head); font-size: 1.25rem; font-weight: 600; line-height: 1.4; letter-spacing: -.01em;
}

/* footer */
.xgs-foot { padding: 20px 0 10px; border-top: 1px solid var(--xgs-line); color: var(--xgs-mute); font-size: .875rem; }
.xgs-foot p { margin: 0 0 .5rem; }
.xgs-foot .xgs-note { margin: 0; text-align: center; line-height: 1.35; }   /* centred, 20px below the line above */
.xgs-foot .xgs-legal { margin: 1rem 0 0; text-align: center; }
.xgs-foot .xgs-legal a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
.xgs-foot .xgs-made { margin: .25rem 0 0; text-align: center; line-height: 1; }   /* centred, right under the line above */

/* ---- tablet: a little more air, terms in two columns ---- */
@media (min-width: 40rem) {
  .xgs-wrap { padding: 0 2rem; }
  .xgs-hero { padding: 5rem 0 4.5rem; }
  .xgs-sec { padding: 3.5rem 0; }
  .xgs-terms { display: grid; grid-template-columns: 10rem 1fr; gap: 1rem 1.5rem; }
  .xgs-terms dt, .xgs-terms dt:first-child { margin: 0; }
}

/* ---- desktop: use the width. Heading group on the left, content on the right, so lines stay readable ---- */
@media (min-width: 56rem) {
  .xgs-top { padding: 1.75rem 0; }
  .xgs-hero { flex-direction: row; justify-content: center; gap: 4rem; padding: 7rem 0 6rem; }
  .xgs-hero-text { flex: 0 0 auto; min-width: min(100%, 28rem); }
  .xgs-pitch { flex: 0 0 auto; width: 17rem; margin: 0; }
  .xgs-hero h1 { font-size: clamp(3.5rem, 5.6vw, 5rem); }
  .xgs-sub { font-size: 1.375rem; }
  .xgs-sec { padding: 4rem 0; }
  .xgs-sec h2 { font-size: 1.5rem; }
  .xgs-foot { padding: 20px 0 10px; }
}

/* ---- wide desktop (1024 px and up): heading group on the left, content on the right ---- */
@media (min-width: 64rem) {
  .xgs-sec { display: grid; grid-template-columns: 15rem minmax(0, 1fr); column-gap: 3rem; }
  .xgs-sec-head { margin-bottom: 0; }
  .xgs-terms { grid-template-columns: 11rem 1fr; }
  /* the price and its line use the same two columns as the terms below, so the line starts where the descriptions start */
  .xgs-price-row { display: grid; grid-template-columns: 11rem 1fr; gap: 1rem 1.5rem; }
}

/* ---- the paid waitlist popup ---- */
.xgs-dialog { position: fixed; width: min(30rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); margin: auto; padding: 0; border: 0; border-radius: .75rem; background: #fff; color: var(--xgs-ink); box-shadow: 0 20px 60px rgba(32, 45, 52, .3); overflow: auto; }
.xgs-dialog::backdrop { background: rgba(32, 45, 52, .55); }
.xgs-dialog-body { padding: 2.25rem 1.5rem 1.75rem; }
@media (min-width: 40rem) { .xgs-dialog-body { padding: 2.5rem 2rem 2rem; } }
.xgs-dialog h2 { margin: 0 0 .75rem; color: var(--xgs-head); font-size: 1.5rem; line-height: 1.2; letter-spacing: -.015em; }
.xgs-dialog p { margin: 0 0 1.25rem; color: var(--xgs-mute); }
.xgs-dialog-close { position: absolute; top: .5rem; right: .5rem; width: 2.5rem; height: 2.5rem; border: 0; border-radius: .5rem; background: none; color: var(--xgs-mute); font-size: 1.75rem; line-height: 1; cursor: pointer; }
.xgs-dialog-close:hover { color: var(--xgs-ink); }
.xgs-form-fields { display: flex; flex-direction: column; gap: .75rem; }
.xgs-form input[type="email"], .xgs-form input[type="text"] { width: 100%; padding: .75rem 1rem; border: 1px solid var(--xgs-mute); border-radius: .5rem; background: #fff; color: var(--xgs-ink); font: inherit; }
.xgs-form input[type="email"]:focus-visible, .xgs-form input[type="text"]:focus-visible { outline: 3px solid var(--xgs-ink); outline-offset: 2px; }
.xgs-form-success, .xgs-form-error { display: none; margin: 0; }
.xgs-form.success .xgs-form-fields { display: none; }
.xgs-form.success .xgs-form-success { display: block; color: var(--xgs-head); font-weight: 600; }
.xgs-form.error .xgs-form-error { display: block; margin-top: .75rem; color: #b42318; }
.xgs-form.loading button { opacity: .6; pointer-events: none; }
.xgs [hidden] { display: none !important; }
.xgs-join p { margin: 0 0 1.25rem; }
.xgs-join .xgs-join-success { color: var(--xgs-head); font-weight: 600; }
.xgs-join .xgs-join-error { margin: 1rem 0 0; color: #b42318; }
.xgs-join .xgs-join-error a { color: inherit; text-decoration: underline; cursor: pointer; }
.xgs-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- page ---- */
body { margin: 0; background: #FCFCFC; }

/* ---- blog: list, article, pages (served centred in one reading column) ---- */
.xgs { overflow-x: hidden; overflow-x: clip; }   /* so full-width images in articles never add a sideways scrollbar */
.xgs-narrow, .xgs-article { max-width: 42rem; margin: 0 auto; }
.xgs-pagehead { padding: 2.5rem 0 1.5rem; }
.xgs-pagehead h1, .xgs-article h1 {
  margin: 0 0 .75rem; color: var(--xgs-head); font-weight: 700; line-height: 1.1; letter-spacing: -.03em;
  font-size: clamp(2rem, 7vw, 3rem); text-wrap: balance;
}
.xgs-pagehead p { margin: 0 0 .5rem; color: var(--xgs-mute); }
.xgs-meta { margin: 0 0 .5rem; color: var(--xgs-mute); font-size: .875rem; }
.xgs-meta a { color: var(--xgs-accent); text-decoration: none; }
.xgs-meta a:hover { text-decoration: underline; }
.xgs-lock { margin-left: .5rem; padding: .125rem .5rem; border: 1px solid var(--xgs-line); border-radius: 999px; font-size: .75rem; font-weight: 600; white-space: nowrap; }

.xgs-posts { border-top: 1px solid var(--xgs-line); }   /* the blog list (the bullets under "What you get" are .xgs-list) */
.xgs-posts:last-child { margin-bottom: 3rem; }   /* air above the footer line when there is no pager */
.xgs-item { padding: 1.5rem 0; border-bottom: 1px solid var(--xgs-line); }
.xgs-item h2 { margin: 0 0 .5rem; font-size: 1.375rem; line-height: 1.25; letter-spacing: -.015em; }
.xgs-item h2 a { color: var(--xgs-head); text-decoration: none; }
.xgs-item h2 a:hover { color: var(--xgs-accent); }
.xgs-excerpt { margin: 0; color: var(--xgs-mute); }
.xgs-pager { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.5rem 0 3rem; }
.xgs-pager .xgs-meta { margin: 0; }

.xgs-article { padding: 2.5rem 0 3rem; }
.xgs-lede { margin: 0 0 1.5rem; color: var(--xgs-mute); font-size: 1.25rem; line-height: 1.5; }
.xgs-feature { margin: 1.5rem 0 2rem; }
.xgs-feature img { display: block; width: 100%; height: auto; border-radius: .5rem; }
.xgs-feature figcaption, .gh-content figcaption { margin-top: .5rem; color: var(--xgs-mute); font-size: .875rem; text-align: center; }

/* what an author writes in the Ghost editor. One vertical rhythm for everything directly inside the article. */
.xgs-prose.gh-content > * { margin-top: 0; margin-bottom: 0; }
.xgs-prose.gh-content > * + * { margin-top: 1.25rem; }
.xgs-prose.gh-content > h2 { margin-top: 2.5rem; color: var(--xgs-head); font-size: 1.5rem; line-height: 1.25; letter-spacing: -.015em; }
.xgs-prose.gh-content > h3 { margin-top: 2rem; color: var(--xgs-head); font-size: 1.25rem; line-height: 1.3; }
.xgs-prose.gh-content > h2 + *, .xgs-prose.gh-content > h3 + * { margin-top: .75rem; }
.xgs-prose.gh-content > figure, .xgs-prose.gh-content > .kg-card { margin-top: 2rem; margin-bottom: 2rem; }
.gh-content :where(a:not(.xgs-btn, .kg-btn, .gh-btn)) { color: var(--xgs-accent); text-decoration: underline; text-underline-offset: .15em; }
.gh-content ul, .gh-content ol { padding-left: 1.5rem; }
.gh-content li + li { margin-top: .5rem; }
.gh-content blockquote { margin-left: 0; margin-right: 0; padding-left: 1rem; border-left: 3px solid var(--xgs-accent); font-size: 1.125rem; font-weight: 600; }
.gh-content hr { margin: 2.5rem 0; border: 0; border-top: 1px solid var(--xgs-line); }
.gh-content img { max-width: 100%; height: auto; }
.gh-content figure { margin-left: 0; margin-right: 0; }
.gh-content pre { overflow-x: auto; padding: 1rem; border-radius: .5rem; background: rgba(72, 89, 99, .09); font-size: .875rem; line-height: 1.5; }
.gh-content code { padding: .1em .3em; border-radius: .25rem; background: rgba(72, 89, 99, .09); font-size: .9em; }
.gh-content pre code { padding: 0; background: none; }
/* editor image sizes: wide breaks out of the reading column a little, full all the way to the screen edges */
.kg-width-wide { position: relative; left: 50%; width: min(64rem, calc(100vw - 2.5rem)); max-width: none; transform: translateX(-50%); }
.kg-width-full { position: relative; left: 50%; width: 100vw; max-width: none; transform: translateX(-50%); }
.kg-width-wide img, .kg-width-full img { width: 100%; }
/* the same column widths in every weekly table, so the days line up (seven columns; phones have five, see below) */
.gh-content .xgs-table table { table-layout: fixed !important; width: 100% !important; }
@media (min-width: 40rem) {   /* phones have their own widths (six columns), set in the phone block above */
  .gh-content .xgs-table th:nth-child(1) { width: 8%; }
  .gh-content .xgs-table th:nth-child(2), .gh-content .xgs-table th:nth-child(3) { width: 20%; }
  .gh-content .xgs-table th:nth-child(4) { width: 16%; }
  .gh-content .xgs-table th:nth-child(n+5) { width: 12%; }
}
/* below 71rem the emoji sits above the label and the sort arrow below it, so the headers fit the fixed columns */
@media (max-width: 70.99rem) {
  .gh-content .xgs-table th { white-space: normal !important; }
  .gh-content .xgs-sort { flex-direction: column; gap: .2em; }
  .gh-content .xgs-sort-arrow { flex-direction: row; gap: 3px; }
}
/* the weekly tables are wide too: with the emoji header on desktop they need about 766 px, more than the reading column */
.gh-content > .xgs-table { position: relative; left: 50%; width: min(64rem, calc(100vw - 2.5rem)); max-width: none; transform: translateX(-50%); }

/* Ghost's own box for members-only posts ("This post is for subscribers only", rendered inside the article after the
   public part) is not shown: the teaser button and the buttons in the members part do its job. */
.xgs .gh-post-upgrade-cta { display: none; }

/* the full list: a click on a match opens the figures behind it (assets/js/match-detail.js) */
.xgs-table tr.xgs-has-detail { cursor: pointer; }
.xgs-table tr.xgs-has-detail:hover td { background: #f9fafb; }
.xgs-table tr.xgs-has-detail:focus-visible { outline: 2px solid var(--xgs-ink); outline-offset: -2px; }
.xgs-table tr.xgs-has-detail td:last-child::after { content: "\25BE"; margin-left: .3em; color: var(--xgs-mute); font-weight: 400; }   /* a small arrow: this row opens */
.xgs-table tr.xgs-has-detail.xgs-open td:last-child::after { content: "\25B4"; }
.xgs-table tr.xgs-detail[hidden] { display: none !important; }
/* the detail cell spans the whole table, also on phones where the Rank and League cells are hidden */
.xgs-table tr.xgs-detail td { display: table-cell !important; white-space: normal !important; text-align: left !important; padding: .375rem .75rem .75rem !important; font-size: .8125rem !important; }
@media (max-width: 39.99rem) { .xgs-table tr.xgs-detail td { font-size: .75rem !important; } }   /* as small as the table, so a line fits on a phone */
.xgs-table tr.xgs-detail td div { text-wrap: balance; }   /* a line that wraps on a phone breaks in the middle, not before its last word */

/* sortable headers (assets/js/table-sort.js turns Home xG, Away xG and Match xG into buttons) */
.xgs-sort { display: inline-flex; align-items: center; gap: .35em; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; cursor: pointer; }
.xgs-sort:hover { color: var(--xgs-accent); }
.xgs-sort:focus-visible { outline: 2px solid var(--xgs-ink); outline-offset: 3px; border-radius: .125rem; }
.xgs-sort-label { display: block; }
.xgs-emoji {
  display: inline-block; margin: 0 .2em 0 0; font-size: .85em; font-weight: 400; line-height: 1.2;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
.xgs-table th.xgs-has-emoji::before { display: none !important; }   /* the sortable headers carry their emoji inside the button */
@media (min-width: 71rem) { .xgs-emoji { margin-right: .4em; font-size: 1em; } }
.xgs-sort-arrow { display: inline-flex; flex-direction: column; gap: 2px; }
.xgs-sort-arrow::before, .xgs-sort-arrow::after { content: ""; border-left: 4px solid transparent; border-right: 4px solid transparent; opacity: .35; }
.xgs-sort-arrow::before { border-bottom: 5px solid currentColor; }
.xgs-sort-arrow::after { border-top: 5px solid currentColor; }
.xgs-table th[aria-sort="ascending"] .xgs-sort-arrow::before, .xgs-table th[aria-sort="descending"] .xgs-sort-arrow::after { color: var(--xgs-accent); opacity: 1; }

/* what only visitors should see in a post: the public teaser of a weekly table (add the class xgs-public-only to its
   caption and its table). Every signed-in member gets the top list below the paywall marker, so the teaser is hidden
   for them. The top list ends in blurred rows and a button for more (xgs-table--more): that is for those who do not
   pay yet, so paying members get the real rows only. */
.xgs-member .xgs-public-only { display: none !important; }
.xgs-paid .xgs-table--more .xgs-locked, .xgs-paid .xgs-more-cta { display: none !important; }
.xgs-paid .xgs-table--more::after { display: none; }

/* invitation under public articles */
.xgs-cta { margin-top: 3rem; padding: 1.5rem; border: 1px solid var(--xgs-line); border-radius: .75rem; }
.xgs-cta h2 { margin: 0 0 .5rem; color: var(--xgs-head); font-size: 1.375rem; line-height: 1.25; letter-spacing: -.015em; }
.xgs-cta p { margin: 0 0 1.25rem; color: var(--xgs-mute); }