/* ===========================================================================
   Alemannia OnlineFans — broadsheet theme
   Palette: claret #5c1a2e · sky #3f9dc9 · ink #1a1a1a · paper #ffffff
   Type: Zilla Slab (display/headings) + Mona Sans (body). Self-hosted.
   =========================================================================== */

/* ---------- Self-hosted fonts ---------- */
@font-face { font-family:'Zilla Slab'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/zilla-slab-500.woff2') format('woff2'); }
@font-face { font-family:'Zilla Slab'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/zilla-slab-700.woff2') format('woff2'); }
@font-face { font-family:'Zilla Slab'; font-style:italic; font-weight:500; font-display:swap;
  src:url('../fonts/zilla-slab-500-italic.woff2') format('woff2'); }
@font-face { font-family:'Zilla Slab'; font-style:italic; font-weight:700; font-display:swap;
  src:url('../fonts/zilla-slab-700-italic.woff2') format('woff2'); }
@font-face { font-family:'Mona Sans'; font-style:normal; font-weight:200 900; font-display:swap;
  src:url('../fonts/mona-sans.woff2') format('woff2-variations'); }
@font-face { font-family:'Mona Sans'; font-style:italic; font-weight:200 900; font-display:swap;
  src:url('../fonts/mona-sans-italic.woff2') format('woff2-variations'); }

/* ---------- Tokens ---------- */
:root{
  --ao-claret:#5c1a2e; --ao-claret-ink:#4a1424;
  --ao-sky:#3f9dc9; --ao-sky-ink:#2b7ba3;
  --ao-ink:#1a1a1a; --ao-paper:#f4efe5; --ao-card:#ffffff; --ao-cream:#f3ede2;
  --ao-claret-tint:#f3e7ea;
  --ao-rule:rgba(26,26,26,.15); --ao-rule-soft:rgba(26,26,26,.08);
  --ao-muted:#5b5b5b;
  --ao-wrap:1200px;
  --ao-serif:'Zilla Slab',Georgia,'Times New Roman',serif;
  --ao-sans:'Mona Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}

/* ---------- Reset-ish base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ao-paper);color:var(--ao-ink);
  font-family:var(--ao-sans);font-size:17px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4,h5,h6{font-family:var(--ao-serif);font-weight:700;line-height:1.05;margin:0 0 .5em;letter-spacing:-.01em}
a{color:var(--ao-sky-ink);text-decoration:none}
p{margin:0 0 1em}
.ao-wrap{max-width:var(--ao-wrap);margin:0 auto;padding:0 24px}
.ao-kicker{font-family:var(--ao-sans);font-weight:700;font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ao-claret)}
.ao-tag{display:inline-block;background:var(--ao-claret);color:#fff;font-weight:700;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:2px 8px}

/* ---------- Signature: highlighter-wipe links (background-wipe axis) ----------
   A claret tint wipes up behind the word and the ink darkens — the marker pass an
   editor makes on a proof. Replaces the earlier underline sweep: underline-based
   link treatments are a blocked divergence axis fleet-wide (the fleet is nine deep
   on them). The negative margin compensates the padding so the text metrics and
   the line-breaks are byte-identical to the untinted state. */
.ao-content a,.ao-news a,.ao-fixture a{background-image:linear-gradient(var(--ao-claret-tint),var(--ao-claret-tint));
  background-repeat:no-repeat;background-position:0 100%;background-size:0 100%;
  transition:background-size .2s cubic-bezier(.2,.6,.2,1),color .2s linear;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;padding:1px 3px;margin:0 -3px}
.ao-content a:hover,.ao-news a:hover,.ao-fixture a:hover,
.ao-content a:focus-visible,.ao-news a:focus-visible,.ao-fixture a:focus-visible{
  background-size:100% 100%;color:var(--ao-claret-ink)}

/* ---------- Section / card variety (warm paper page, white cards pop) ---------- */
.ao-masthead,.ao-edition{background:var(--ao-card)}
.ao-lead-figure,.ao-article-figure{background:var(--ao-card)}
/* home SEO block as a white card */
.ao-home-intro{background:var(--ao-card);border:1px solid var(--ao-rule-soft);border-top:4px solid var(--ao-claret);
  padding:34px 40px;margin-top:20px;margin-bottom:8px}
/* Experten-Tipp column: subtle claret tint panel */
.ao-twoup>div:first-child{background:var(--ao-claret-tint);padding:22px 26px;border-right:0}
/* FAQ + related on a white card */
.ao-faq,.ao-related{background:var(--ao-card);border:1px solid var(--ao-rule-soft);padding:8px 24px 4px;margin-left:0;margin-right:0}
.ao-faq .ao-sec-head,.ao-related .ao-sec-head{margin-top:18px}

/* ---------- Header / masthead ---------- */
.ao-masthead{border-bottom:4px solid var(--ao-claret);padding:26px 0 12px}
.ao-brand{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.ao-brand-tagline{font-family:var(--ao-sans);font-weight:700;font-size:11px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--ao-claret)}
.ao-brand-lockup{display:flex;align-items:center;gap:16px}
.ao-crest{flex:none}
.ao-wordmark{font-family:var(--ao-serif);font-weight:700;text-transform:uppercase;
  font-size:clamp(34px,7vw,72px);line-height:.92;letter-spacing:-.03em;margin:0}
.ao-wordmark .ao-wm-1{color:var(--ao-claret)} .ao-wordmark .ao-wm-2{color:var(--ao-ink)}
.ao-nav{border-top:1px solid var(--ao-rule);border-bottom:1px solid var(--ao-rule);
  margin-top:18px;padding:12px 0}
.ao-nav ul{list-style:none;margin:0;padding:0;display:flex;justify-content:center;flex-wrap:wrap;gap:8px 34px}
.ao-nav a{font-family:var(--ao-sans);font-weight:700;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ao-ink);padding:2px 0;
  background-image:linear-gradient(var(--ao-sky),var(--ao-sky));background-repeat:no-repeat;
  background-position:0 100%;background-size:0 2px;transition:background-size .18s linear,color .18s linear}
.ao-nav a:hover,.ao-nav .current-menu-item>a{background-size:100% 2px;color:var(--ao-claret)}
.ao-nav .current-menu-item>a{background-image:linear-gradient(var(--ao-claret),var(--ao-claret))}

/* edition strip */
.ao-edition{border-bottom:1px solid var(--ao-rule)}
.ao-edition .ao-wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding-top:8px;padding-bottom:8px;font-family:var(--ao-sans);font-weight:700;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ao-muted)}
.ao-edition .ao-ed-mid{color:var(--ao-claret)}

/* ---------- Layout grid ---------- */
.ao-main{display:grid;grid-template-columns:2fr 1fr;gap:40px;padding:36px 0}
.ao-aside{border-left:1px solid var(--ao-rule);padding-left:32px}

/* ---------- Lead article ---------- */
.ao-lead{border-bottom:1px solid var(--ao-rule);padding-bottom:36px;margin-bottom:36px}
.ao-lead-meta{display:flex;align-items:center;gap:10px;margin-bottom:14px;
  font-size:11px;text-transform:uppercase;font-weight:700;color:var(--ao-claret);letter-spacing:.1em}
.ao-lead h2,.ao-lead .ao-lead-title{font-size:clamp(30px,5vw,58px);line-height:1.0;margin-bottom:18px}
.ao-standfirst{font-family:var(--ao-serif);font-style:italic;font-weight:500;
  font-size:clamp(19px,2.4vw,25px);line-height:1.3;color:#39393d;max-width:60ch;margin-bottom:22px}
.ao-lead-figure{margin:0 0 22px;border:1px solid var(--ao-rule-soft)}
.ao-lead-figure img{filter:grayscale(1) contrast(1.08);width:100%}
.ao-article-figure{margin:0 0 26px;border:1px solid var(--ao-rule-soft)}
.ao-article-figure img{width:100%;filter:grayscale(1) contrast(1.06)}
.ao-lead-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;
  border-top:2px solid var(--ao-ink);padding-top:10px}
.ao-lead-foot .ao-byline{border-top:0;padding-top:0;margin:0}
.ao-byline{border-top:2px solid var(--ao-ink);padding-top:6px;margin-bottom:12px}
.ao-byline b{display:block;text-transform:uppercase;font-size:13px;letter-spacing:.04em}
.ao-byline span{color:var(--ao-muted);font-style:italic;font-size:13px}
.ao-readmore{display:inline-block;font-weight:700;color:var(--ao-sky-ink);
  border-bottom:1px solid var(--ao-sky)}
.ao-readmore:hover{color:var(--ao-claret);border-color:var(--ao-claret)}

/* ---------- Section headings ---------- */
.ao-sec-head{font-family:var(--ao-sans);font-weight:800;font-size:12px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ao-claret);border-bottom:4px solid var(--ao-claret);
  display:inline-block;padding-bottom:4px;margin-bottom:22px}

/* ---------- Two-up: tipster + shorts ---------- */
.ao-twoup{display:grid;grid-template-columns:1fr 1fr;gap:36px;margin-bottom:36px}
.ao-twoup>div:first-child{border-right:1px solid var(--ao-rule);padding-right:32px}

/* tipster */
.ao-tip-lede h4{font-size:24px;line-height:1.12;margin:4px 0 8px}
.ao-tip-lede .ao-eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--ao-muted);font-weight:700}
.ao-tip-card{border:1px solid var(--ao-ink);padding:16px;margin-top:20px}
.ao-tip-card h5{font-family:var(--ao-sans);font-weight:800;text-transform:uppercase;font-size:12px;
  letter-spacing:.08em;border-bottom:1px solid var(--ao-rule);padding-bottom:8px;margin:0 0 10px}
.ao-oddstable{width:100%;border-collapse:collapse;font-size:14px}
.ao-oddstable th{text-align:left;font-family:var(--ao-sans);font-weight:800;font-size:11px;
  text-transform:uppercase;letter-spacing:.05em;padding:0 0 8px;border-bottom:1px solid var(--ao-rule)}
.ao-oddstable td{padding:9px 0;border-bottom:1px solid var(--ao-rule-soft)}
.ao-oddstable td.ao-odd{font-weight:800;font-variant-numeric:tabular-nums;color:var(--ao-claret)}
.ao-oddstable tr:last-child td{border-bottom:0}

/* short news list */
.ao-news{list-style:none;margin:0;padding:0}
.ao-news li{border-bottom:1px solid var(--ao-rule);padding:0 0 16px;margin-bottom:16px}
.ao-news li:last-child{border-bottom:0;margin-bottom:0}
.ao-news .ao-eyebrow{display:block;font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--ao-claret);margin-bottom:3px}
.ao-news h4{font-size:19px;line-height:1.12;margin:0}
.ao-news-row{display:flex;gap:14px;align-items:flex-start}
.ao-news-thumb{flex:none;width:96px;height:64px;overflow:hidden;border:1px solid var(--ao-rule-soft)}
.ao-news-thumb img{width:96px;height:64px;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.ao-news-txt{flex:1}
.ao-related{margin-top:34px}

/* ---------- Aside widgets ---------- */
.ao-widget{margin-bottom:38px}
.ao-widget-head{font-family:var(--ao-serif);font-weight:700;text-transform:uppercase;font-size:21px;
  border-bottom:2px solid var(--ao-ink);padding-bottom:8px;margin:0 0 16px}
.ao-formrow{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.ao-formrow .ao-eyebrow{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.ao-chips{display:flex;gap:4px}
.ao-chip{width:22px;height:22px;display:flex;align-items:center;justify-content:center;
  font-family:var(--ao-sans);font-weight:800;font-size:11px}
.ao-chip.s{background:var(--ao-ink);color:#fff}
.ao-chip.u{border:1px solid var(--ao-ink);color:var(--ao-ink)}
.ao-chip.n{background:var(--ao-claret);color:#fff}
.ao-table-mini{font-size:13px;font-weight:700}
.ao-table-mini .r{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--ao-rule)}
.ao-table-mini .r.me{border-bottom:2px solid var(--ao-claret);background:rgba(92,26,46,.05);color:var(--ao-claret);padding-left:4px;padding-right:4px}
.ao-table-mini .r .n{font-variant-numeric:tabular-nums}
.ao-fixture{margin-bottom:14px}
.ao-fixture .d{font-size:10px;font-weight:700;text-transform:uppercase;color:var(--ao-claret);letter-spacing:.06em}
.ao-fixture .m{font-weight:700;font-size:14px}

/* top-quoten (claret box) */
.ao-quoten{background:var(--ao-claret);color:#fff;padding:18px}
.ao-quoten .ao-widget-head{color:#fff;border-color:rgba(255,255,255,.25)}
.ao-quoten-row{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;
  border-bottom:1px solid rgba(255,255,255,.15);padding-bottom:12px;margin-bottom:12px;font-size:13px}
.ao-quoten-row .b{font-weight:800;text-transform:uppercase}
.ao-quoten-row .o{color:rgba(255,255,255,.75)}
.ao-quoten-cta{background:#fff;color:var(--ao-claret);font-weight:800;padding:5px 10px;white-space:nowrap;font-size:12px}
.ao-rg-note{font-size:10px;font-weight:700;font-style:italic;text-transform:uppercase;
  color:rgba(255,255,255,.6);line-height:1.35;margin:14px 0 0}

/* ---------- Article / page body ---------- */
.ao-article{padding:34px 0 20px}
.ao-article-header{border-bottom:1px solid var(--ao-rule);padding-bottom:20px;margin-bottom:26px}
.ao-article-header h1{font-size:clamp(30px,5vw,52px);line-height:1.02;margin:10px 0 14px}
.ao-content{max-width:none}
.ao-content h2{font-size:30px;margin:1.4em 0 .5em}
.ao-content h3{font-size:23px;margin:1.3em 0 .4em}
.ao-content ul,.ao-content ol{margin:0 0 1.2em;padding-left:1.3em}
.ao-content li{margin-bottom:.4em}
.ao-content blockquote{margin:1.6em 0;padding:.4em 0 .5em;border-top:2px solid var(--ao-claret);
  border-bottom:1px solid var(--ao-rule);font-family:var(--ao-serif);font-style:italic;font-weight:500;
  font-size:clamp(21px,2.4vw,27px);line-height:1.25;color:var(--ao-claret)}
.ao-content blockquote p{margin:.3em 0}
.ao-content img{margin:1.4em 0}

/* ---------- Button (global; also used by betting silo) ---------- */
.ao-btn{display:inline-block;background:var(--ao-claret);color:#fff;font-family:var(--ao-sans);
  font-weight:800;font-size:13px;letter-spacing:.04em;text-transform:uppercase;
  padding:9px 16px;border:0;cursor:pointer;text-decoration:none;transition:background .16s linear}
.ao-btn:hover{background:var(--ao-claret-ink);color:#fff}

/* ---------- Sidebar: more-articles list + tool teaser ---------- */
.ao-sb-list{list-style:none;margin:0;padding:0}
.ao-sb-list li{border-bottom:1px solid var(--ao-rule);padding:0 0 10px;margin-bottom:10px}
.ao-sb-list li:last-child{border-bottom:0;margin-bottom:0}
.ao-sb-list a{font-family:var(--ao-serif);font-weight:700;font-size:15px;line-height:1.2;color:var(--ao-ink)}
.ao-sb-list a:hover{color:var(--ao-claret)}
.ao-sb-tool{background:var(--ao-claret-tint);border:1px solid var(--ao-rule-soft);padding:16px 18px}
.ao-sb-tool p{font-size:14px;color:#333;margin:0 0 12px}

/* ---------- EEAT author box ---------- */
.ao-authorbox{display:flex;gap:18px;align-items:flex-start;border-top:2px solid var(--ao-ink);
  border-bottom:1px solid var(--ao-rule);padding:20px 0;margin:34px 0}
.ao-authorbox-img{flex:none;width:72px;height:72px;border-radius:50%;object-fit:cover;
  filter:grayscale(1) contrast(1.05);border:2px solid var(--ao-claret)}
.ao-authorbox-kicker{display:block;font-family:var(--ao-sans);font-weight:800;font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ao-claret);margin-bottom:3px}
.ao-authorbox-name{font-family:var(--ao-serif);font-weight:700;font-size:20px;color:var(--ao-ink);display:inline-block}
.ao-authorbox-name:hover{color:var(--ao-claret)}
.ao-authorbox-role{display:block;font-size:13px;font-style:italic;color:var(--ao-muted);margin:2px 0 8px}
.ao-authorbox-bio{font-size:14px;color:#3a3a3a;margin:0;max-width:70ch}

/* ---------- FAQ accordion (H3 question inside summary) ---------- */
.ao-faq{margin:36px 0}
.ao-faq-item{border-bottom:1px solid var(--ao-rule)}
.ao-faq-item summary{list-style:none;cursor:pointer;padding:16px 34px 16px 0;position:relative}
.ao-faq-item summary::-webkit-details-marker{display:none}
.ao-faq-q{font-family:var(--ao-serif);font-weight:700;font-size:19px;margin:0;line-height:1.2;display:inline}
.ao-faq-item summary::after{content:"+";position:absolute;right:4px;top:14px;font-family:var(--ao-serif);
  font-size:24px;color:var(--ao-claret);line-height:1}
.ao-faq-item[open] summary::after{content:"–"}
.ao-faq-a{padding:0 0 18px;color:#333;font-size:16px;line-height:1.6}
.ao-faq-a p{margin:0 0 .6em}
.ao-faq-a p:last-child{margin-bottom:0}

/* ---------- Homepage SEO text block ---------- */
.ao-home-intro{border-top:2px solid var(--ao-ink);padding-top:26px;margin-top:8px}
.ao-home-intro h2{font-size:26px;margin:0 0 .5em}
.ao-home-intro h3{font-size:20px;margin:1.2em 0 .3em}
.ao-home-intro p{margin:0 0 1em;color:#2a2a2a}

/* ---------- Footer ---------- */
.ao-footer{border-top:8px solid var(--ao-claret);padding:48px 0 32px;margin-top:52px}
.ao-footer-cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:44px;margin-bottom:40px}
.ao-footer h5{font-family:var(--ao-serif);font-weight:700;text-transform:uppercase;font-size:26px;margin:0 0 14px}
.ao-footer .ao-blurb{color:var(--ao-muted);font-size:15px;max-width:44ch}
.ao-footer h6{font-family:var(--ao-sans);font-weight:800;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ao-claret);margin:0 0 16px}
.ao-footer ul{list-style:none;margin:0;padding:0}
.ao-footer li{margin-bottom:8px}
.ao-footer li a{font-family:var(--ao-sans);font-weight:700;text-transform:uppercase;font-size:14px;color:var(--ao-ink)}
.ao-footer li a:hover{color:var(--ao-sky-ink)}
.ao-footer-bar{border-top:1px solid var(--ao-rule);padding-top:24px;display:flex;
  justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
  font-family:var(--ao-sans);font-weight:700;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ao-muted)}
.ao-18{border:2px solid var(--ao-claret);color:var(--ao-claret);padding:3px 8px;margin-right:10px}

/* ---------- Signature: rule-draw reveal (draw-rules axis) ----------
   The section's claret rule draws across instead of the block fading up.
   Rationale: fade-based reveals are a blocked divergence axis fleet-wide, and a
   drawn rule is this archetype's own vocabulary (see .ao-home-intro's claret
   border-top). Side benefits over the fade it replaces: the CONTENT is never
   hidden, so it is no-JS-safe by construction, it cannot contribute to CLS, and
   full-page screenshots no longer capture the sections as empty bands.
   The rule defaults to drawn; only .ao-js collapses it before it enters view. */
.ao-reveal{position:relative;padding-top:18px}
.ao-reveal::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--ao-claret);transform:scaleX(1);transform-origin:left}
.ao-js .ao-reveal:not(.is-in)::before{transform:scaleX(0)}
.ao-js .ao-reveal::before{transition:transform .48s cubic-bezier(.2,.6,.2,1)}
@media (prefers-reduced-motion:reduce){
  .ao-js .ao-reveal::before{transform:scaleX(1);transition:none}
}

/* ---------- Responsive ---------- */
/* Mobile nav toggle (hamburger). Desktop: hidden. No-JS: hidden + menu stays visible (wrapping). */
.ao-nav-toggle{display:none;align-items:center;gap:8px;background:none;border:0;cursor:pointer;
  color:var(--ao-claret);font-family:var(--ao-sans);font-weight:800;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;padding:11px 6px;line-height:1}
.ao-nav-ico{display:block}
.ao-nav-ico-close{display:none}
.ao-nav.is-open .ao-nav-ico-open{display:none}
.ao-nav.is-open .ao-nav-ico-close{display:block}
@media (max-width:700px){
  .ao-js .ao-nav{flex-direction:column;align-items:center}
  .ao-js .ao-nav-toggle{display:inline-flex}
  .ao-js .ao-nav-list{display:none}
  .ao-js .ao-nav.is-open .ao-nav-list{display:flex;flex-direction:column;width:100%;text-align:center;gap:0}
  .ao-js .ao-nav.is-open .ao-nav-list li{width:100%;border-top:1px solid var(--ao-rule-soft)}
  .ao-js .ao-nav.is-open .ao-nav-list a{display:block;padding:13px 0}
}
@media (max-width:900px){
  .ao-main{grid-template-columns:1fr;gap:32px}
  .ao-aside{border-left:0;padding-left:0;border-top:1px solid var(--ao-rule);padding-top:32px}
  .ao-lead-body{grid-template-columns:1fr}
  .ao-twoup{grid-template-columns:1fr;gap:28px}
  .ao-twoup>div:first-child{border-right:0;padding-right:0;border-bottom:1px solid var(--ao-rule);padding-bottom:28px}
  .ao-footer-cols{grid-template-columns:1fr 1fr;gap:28px}
}
@media (max-width:560px){
  body{font-size:16px}
  .ao-nav ul{gap:6px 18px}
  .ao-footer-cols{grid-template-columns:1fr}
  .ao-edition .ao-wrap{justify-content:center;text-align:center}
}