body.articles-page{margin:0;background:#0e0e0e;color:#f3f0e7;font-family:Inter,system-ui,sans-serif}.articles-page main{box-sizing:border-box;width:100%;text-align:left}.articles-index{padding-top:56px;padding-bottom:72px}.articles-page h1{font-size:clamp(36px,5vw,64px);line-height:1.05;letter-spacing:-2px;margin:12px 0 20px}.eyebrow{color:#d9bd7b;text-transform:uppercase;letter-spacing:1.5px;font-size:11px;font-weight:800}.article-deck{font-size:20px;color:#babbb7;line-height:1.5}.articles-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:36px}.article-card{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);min-width:0;overflow:hidden;border:1px solid #303030;border-radius:12px;background:#151515;color:inherit;text-decoration:none;margin:0}.article-card img{width:100%;height:100%;object-fit:cover}.article-card>div{padding:28px;min-width:0;display:flex;flex-direction:column;align-items:flex-start}.article-card h2{margin:0 0 12px;font-size:28px;letter-spacing:-1px;line-height:1.1}.article-card p:not(.eyebrow){color:#bbb;line-height:1.6;margin:0 0 20px}.article-card .read-cta{display:block;min-height:0;padding:0;margin-top:auto;color:#ead18b;font-weight:600;text-align:left}.read-cta{margin-top:var(--muck-space-5);box-sizing:border-box;min-height:56px;padding:0 var(--muck-space-6);font-size:16px}/* the Button component (assets/button.css mk-btn--primary) since 2026-10-17: "make button more prominent like other buttons" */.article-card:hover{border-color:#c7ac70}.article-card:focus-visible,a:focus-visible{outline:3px solid #ffda58;outline-offset:4px}.article-wrap{padding-top:32px;padding-bottom:64px}.article-wrap>article,.article-wrap>.back-link,.article-wrap>.article-note,.article-wrap>.read-cta{max-width:950px;margin-left:auto;margin-right:auto}/* one 950px column, centred (Shaun, 2026-10-19) */.article-wrap>article{font-size:17px;line-height:1.8;color:#c9cac5}.article-wrap h1,.article-wrap h2{color:#f3f0e7}.article-wrap h1{font-size:clamp(36px,5vw,56px)}.article-wrap h2{font-size:26px;letter-spacing:-.6px;line-height:1.25;margin-top:36px}.back-link{display:block;color:#d9bd7b;font-size:13px;text-decoration:none;margin-bottom:32px}.article-art{width:100%;border-radius:10px;margin:18px 0}.article-wrap table{width:100%;border-collapse:collapse;margin:26px 0;background:#171a17}.article-wrap th,.article-wrap td{padding:14px;text-align:left;border-bottom:1px solid #333}.red{color:#fa8e91}.takeaway{background:#252117;border-left:3px solid #d9bd7b;padding:16px 20px;color:#ffda58}.article-note{font-size:12px;color:#999}.article-wrap>.read-cta{display:flex;width:fit-content;margin-left:max(0px,calc((100% - 950px)/2))}.articles-page .lobby-footer{margin:0 auto;max-width:1600px}@media(max-width:700px){.articles-index,.article-wrap{padding:24px 18px 40px}.article-card{grid-template-columns:1fr}.article-card>div{padding:22px}.article-card h2{font-size:27px}.article-deck{font-size:17px}.article-wrap>article{font-size:16px}.article-wrap th,.article-wrap td{padding:10px}.articles-page h1{letter-spacing:-1px}}

.article-wrap article a{color:#ffda58;text-underline-offset:3px}.article-wrap article a:hover{color:#ffeaa1}
.article-card img{object-fit:contain;background:#0b2118}
@media(max-width:719px){.article-wrap>.read-cta{width:100%}}
/* The free ebook card at the bottom of every article page (includes/ebook-card.php, 2026-10-17): the cover, the title, one line, the download */
.articles-page :is(main,.anx)>:is(.ebk-card,.anx-card){max-width:none;margin:var(--muck-space-7) 0 0;box-sizing:border-box;display:flex;align-items:center;gap:var(--muck-space-5);padding:var(--muck-space-5);border:1px solid var(--muck-line-strong);border-radius:var(--muck-radius-card);background:var(--muck-surface-1)}
.articles-page main.articles-index>.ebk-card{max-width:none;margin-left:0}   /* the list page: lined up with the article cards above it */
.ebk-cover{flex:none;width:120px;height:auto;border-radius:4px;box-shadow:0 var(--muck-space-2) var(--muck-space-5) rgb(0 0 0 / .45)}
.ebk-copy{min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.articles-page .ebk-copy h2{margin:0;font-size:24px;letter-spacing:-.5px}
.ebk-copy p{margin:var(--muck-space-1) 0 var(--muck-space-4);color:var(--muck-text-2);font-size:15px;line-height:1.5}
.ebk-copy small{margin-top:var(--muck-space-2);color:var(--muck-text-3);font-size:12px}
/* Phones: the cover beside the title and line, the button and its size note full width under them */
@media(max-width:519px){
 .articles-page :is(main,.anx)>:is(.ebk-card,.anx-card){display:grid;grid-template-columns:auto 1fr;align-items:center;gap:0 var(--muck-space-4);padding:var(--muck-space-4)}
 .ebk-copy{display:contents}
 :is(.ebk-cover,.anx-fan){width:88px;grid-row:1 / 3}
 .articles-page .ebk-copy h2{grid-column:2;align-self:end}
 .ebk-copy p{grid-column:2;align-self:start;margin-bottom:0}
 .ebk-btn{grid-column:1 / -1;box-sizing:border-box;width:100%;margin-top:var(--muck-space-4)}
 .ebk-copy small{grid-column:1 / -1;justify-self:center}
}

@media(min-width:701px) and (max-width:1100px){.article-card{grid-template-columns:1fr}.article-card img{aspect-ratio:2/1;height:auto}}
@media(max-width:700px){.articles-grid{grid-template-columns:1fr;gap:20px;margin-top:24px}.article-card img{height:auto}.article-card .read-cta{margin-top:0}}

/* The two choices at the bottom of an article (includes/article-next.php): where to go next, and the ebook, side by side
   in the article's column; one card each, the same size; stacked on phones */
.article-wrap>.anx{display:grid;grid-template-columns:1fr 1fr;gap:var(--muck-space-5);max-width:950px;margin:var(--muck-space-7) auto 0}
.articles-page .anx>:is(.ebk-card,.anx-card){margin:0}
.anx-fan{flex:none;position:relative;width:160px;height:150px}
.anx-fan .acd{position:absolute;left:50%;top:50%;width:64px;height:88px;border-radius:8px;box-shadow:0 var(--muck-space-2) var(--muck-space-5) rgb(0 0 0 / .45)}
.anx-fan .acd{justify-content:flex-start;align-items:flex-start;padding:7px 8px;box-sizing:border-box}   /* the index in the corner, like a real card: it shows however much the next card covers */
.anx-fan .acd b{font-size:24px}.anx-fan .acd i{font-size:18px}
.anx-fan .acd:nth-child(1){transform:translate(-115%,-46%) rotate(-10deg)}
.anx-fan .acd:nth-child(2){transform:translate(-50%,-54%)}
.anx-fan .acd:nth-child(3){transform:translate(15%,-46%) rotate(10deg)}
@media(max-width:899px){.article-wrap>.anx{grid-template-columns:1fr}}
@media(max-width:519px){.articles-page .anx-fan{width:104px;height:112px}.anx-fan .acd{width:44px;height:62px;border-radius:6px}.anx-fan .acd{padding:5px 6px}.anx-fan .acd b{font-size:17px}.anx-fan .acd i{font-size:13px}
 .anx-fan .acd:nth-child(1){transform:translate(-106%,-46%) rotate(-10deg)}.anx-fan .acd:nth-child(3){transform:translate(6%,-46%) rotate(10deg)}}
/* The odds calculator line at the end of the pot odds articles (2026-10-20) */
.article-calc{margin:28px 0 0;padding:14px 18px;border:1px solid var(--muck-line);border-radius:10px;background:var(--muck-surface-1);color:var(--muck-text-2);font-size:15px}
.article-calc a{color:var(--muck-gold);font-weight:650}

/* Artwork template: 1000 × 400; all editorial text stays live beneath it. */
.articles-page .article-card{grid-template-columns:1fr;grid-template-rows:auto 1fr;background:#151716;border-color:#303731;border-radius:12px}
.articles-page .article-card img{display:block;width:100%;height:auto;aspect-ratio:3/1;object-fit:cover;background:#101d1b}
.articles-page .article-card>div{padding:28px 30px 30px}
.articles-page .article-card h2{font-size:clamp(23px,2vw,30px);line-height:1.15;letter-spacing:-.7px;max-width:560px}
.articles-page .article-card p{max-width:560px}
.articles-page .article-card .read-cta{margin-top:auto;padding-top:8px}
@media(max-width:700px){.articles-page .article-card>div{padding:22px}.articles-page .article-card img{aspect-ratio:3/1}}

/* Article examples have a full reading column, unlike compact hand-review widgets. */
.articles-page .article-wrap .asp{width:100%;max-width:none;margin:32px 0}
.articles-page .asp .hr-table{max-width:none;aspect-ratio:2/1;container-type:inline-size}
.articles-page .asp .hr-felt{inset:10% 3%}
.articles-page .asp .hr-card{box-sizing:border-box;width:clamp(32px,6cqi,58px);height:clamp(44px,8.3cqi,80px);border-radius:7px}
.articles-page .asp .hr-card b{font-size:clamp(17px,3cqi,29px)}
.articles-page .asp .hr-card i{font-size:clamp(15px,2.5cqi,24px)}
.articles-page .asp .hr-board,.articles-page .asp .hr-hole{gap:clamp(4px,.8cqi,8px)}
.articles-page .asp .hr-seat{min-width:72px;padding:7px 10px}
.articles-page .asp .hr-seat b{font-size:clamp(12px,1.8cqi,17px)}
.articles-page .asp .hr-hole{transform:translate(calc(-100% - 52px),-50%)}
.articles-page .asp .hr-street-tag,.articles-page .asp .hr-act-tag{font-size:clamp(10px,1.5cqi,14px)}
.articles-page .asp .hr-pot,.articles-page .asp .hr-bet{font-size:clamp(12px,1.8cqi,17px)}
.articles-page .asp .asp-table--action{aspect-ratio:16/10}
.articles-page .article-wrap .acd-box{max-width:none;width:100%;padding:22px 24px}
.articles-page .acd-box .acd--lg{width:50px;height:68px}
.articles-page .acd-box .acd--lg b{font-size:23px}
.articles-page .acd-box .acd--lg i{font-size:20px}
.articles-page .acd-box .acd--md{width:36px;height:50px}
.articles-page .acd-box .acd--md b{font-size:18px}
.articles-page .acd-box .acd--md i{font-size:15px}
.articles-page .acd-box .acd-row{gap:7px;flex-wrap:wrap}
.articles-page .acd-box .acd-who,.articles-page .acd-box .acd-cap{font-size:16px}
@media(max-width:600px){
 .articles-page .asp .hr-table{aspect-ratio:8/5}
 .articles-page .asp .asp-table--action{aspect-ratio:8/7}
 .articles-page .asp .hr-seat{min-width:56px;padding:5px 8px}
 .articles-page .asp .hr-hole{transform:translate(calc(-100% - 42px),-50%)}
 .articles-page .article-wrap .acd-box{padding:16px 12px}
 .articles-page .acd-box .acd--lg{width:34px;height:48px}
 .articles-page .acd-box .acd--lg b{font-size:18px}
 .articles-page .acd-box .acd--lg i{font-size:15px}
 .articles-page .acd-box .acd-row{gap:4px}
 .articles-page .acd-box .acd-who,.articles-page .acd-box .acd-cap{font-size:14px}
}

/* The ebook occupies the final article-grid slot, beside the odd article. */
.articles-page .articles-grid>.ebk-card{box-sizing:border-box;min-width:0;margin:0;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:32px;padding:30px;border:1px solid #303731;border-radius:12px;background:#151716}   /* the cover left, the words and the button right (Shaun, 2026-10-23) */
.articles-grid>.ebk-card .ebk-cover{width:150px}
.articles-grid>.ebk-card .ebk-copy{display:flex;align-items:flex-start;text-align:left}
.articles-grid>.ebk-card .ebk-copy h2{margin:0;font-size:28px;letter-spacing:-.7px}
.articles-grid>.ebk-card .ebk-btn{max-width:100%;white-space:normal;text-align:center}
/* Phones and small tablets (the card is narrow there, a column of a two-across grid or the only one): stacked, the cover
   on top and the words and button centered under it (Shaun, 2026-10-23: "fix this to stack, cause it looks very cluttered") */
@media(max-width:1000px){.articles-page .articles-grid>.ebk-card{flex-direction:column;gap:18px;padding:24px 20px;text-align:center}.articles-grid>.ebk-card .ebk-cover{width:120px}.articles-grid>.ebk-card .ebk-copy{display:flex;flex-direction:column;align-items:center;text-align:center}.articles-grid>.ebk-card .ebk-copy>*{align-self:center;justify-self:auto}.articles-grid>.ebk-card .ebk-copy h2{font-size:24px}.articles-grid>.ebk-card .ebk-btn{width:auto;margin-top:0}}   /* the page's phone rule flattens .ebk-copy: keep this card's words in one column */
.articles-grid>.ebk-card .ebk-copy small{margin-top:12px}