@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/newsreader-variable-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/newsreader-italic-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/schibsted-grotesk-variable-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{color-scheme:light;--paper:#ffffff;--ink:#1e2842;--muted:#635e57;--link:#b42a20;--rule:#cbc6bf;--surface:#ffffff;--tint:#f2f1ee;--head-bg:#1e2842;--head-ink:#ffffff;--head-mark:#d6352a;--foot-bg:#1e2842;--foot-ink:#ffffff;--accent:#1e2842;--accent-ink:#ffffff;--badge-bg:#1e2842;--badge-ink:#ffffff;--head-rule:#1e2842;--foot-rule:#635e57;--warn-bg:#fbe4e1;--warn-ink:#b42a20;--ok-bg:#e1efeb;--ok-ink:#1d6b5e;--claim-bg:#faefd6;--claim-ink:#8a5a00;--focus:#b42a20;--tint-rule:#cbc6bf;--tile-bg:#f2f1ee;--tile-ink:#1e2842;--status-bg:#1e2842;--status-ink:#ffffff;--display:"Newsreader", Georgia, "Times New Roman", serif;--body:"Newsreader", Georgia, "Times New Roman", serif;--ui:"Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;--mono:"IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;--radius:2px;--display-weight:600}
/* Shared base for every content site. Every colour is a role variable from the site's own tokens (theme.mjs);
   nothing here is a brand value. Owner defaults (29 and 30 September 2026): one full-width rectangular header,
   fixed at the top while the page scrolls, every page reachable from it, no pill or circle shapes around the logo
   or links; a calm hero; on phones the at-a-glance grid first, one card per row, card contents centred, wagering
   and first deposit on one line, the rating badge top right of the card; the comparison table kept under the grid;
   running paragraphs justified with hyphens at every width (owner, 2 October); all text visible at load, so nothing
   waits for a scroll or a timer (the questions fold, the first open, with every answer in the HTML: owner, 2 October). */
:root{--max:1180px;--read:42rem;--gutter:clamp(16px,4vw,40px);--head-h:64px}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--head-h) + 16px)}
body{margin:0;background:var(--paper);color:var(--ink);font:400 18px/1.6 var(--body);overflow-wrap:break-word;font-variant-numeric:lining-nums}
img,svg{max-width:100%}
a{color:var(--link);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:var(--display-weight);color:var(--ink);line-height:1.12;letter-spacing:-.012em;text-wrap:balance;overflow-wrap:normal}
h1{font-size:clamp(32px,4.4vw,54px);letter-spacing:-.02em}
h2{font-size:clamp(24px,2.5vw,32px);margin:0 0 .6em}
h3{font-size:clamp(19px,1.5vw,21px);line-height:1.25;margin:0 0 .4em}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em;padding-left:1.3em}
li{margin:0 0 .35em}
.wrap{width:100%;max-width:calc(var(--max) + 2 * var(--gutter));margin:0 auto;padding:0 var(--gutter)}
.label,.kicker{display:block;font:600 12px/1.3 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.meta{font:500 13.5px/1.5 var(--mono);color:var(--muted)}

/* Header: one straight band, fixed at the top on every page and screen size (D1's r7 header for sistersite.nz,
   30 September, with the site's own colours). The logo links home; the main pages sit in the bar and every other
   page opens from "More"; below 1024px a Menu button opens every link. Both menus are details/summary, so they work
   without JavaScript and every link is in the HTML. The current page and the one under the pointer carry a rule on
   the band's bottom edge; nothing is drawn as a pill or a circle. */
.site-head{position:sticky;top:0;z-index:40;background:var(--head-bg);color:var(--head-ink);border-bottom:1px solid var(--head-rule)}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:calc(var(--max) + 2 * var(--gutter));height:var(--head-h);margin:0 auto;padding:0 var(--gutter)}
.head-logo{flex:none;display:flex;align-items:center;gap:.4em;min-height:44px;color:var(--head-ink);text-decoration:none;font:var(--display-weight) 25px/1 var(--display);letter-spacing:-.02em}
.wm-svg{display:block;width:auto;height:30px}.wm-mark{display:block;flex:none;width:auto;height:1.15em}
.head-nav>ul{display:flex;align-items:stretch;margin:0 calc(-1 * clamp(9px,1vw,14px)) 0 0;padding:0;list-style:none}
.head-nav li{margin:0}
.head-nav>ul>li>a,.nav-more>details>summary{position:relative;display:block;height:var(--head-h);padding:0 clamp(9px,1vw,14px);color:var(--head-ink);font:600 15px/var(--head-h) var(--ui);text-decoration:none;white-space:nowrap;cursor:pointer}
.head-nav>ul>li>a::after,.nav-more>details>summary::after{content:"";position:absolute;left:clamp(9px,1vw,14px);right:clamp(9px,1vw,14px);bottom:0;height:3px;background:var(--head-mark);scale:0 1;transition:scale .18s ease-out}
.head-nav>ul>li>a:hover::after,.nav-more>details>summary:hover::after,.head-nav>ul>li>a[aria-current]::after,.nav-more>details>summary[data-current]::after,.nav-more>details[open]>summary::after{scale:1 1}
.menu>summary{list-style:none}.menu>summary::-webkit-details-marker{display:none}
.head-nav :focus-visible,.head-menu :focus-visible{outline-offset:-3px}
.chev{display:inline-block;vertical-align:middle;margin:-2px 0 0 6px;transition:rotate .18s ease-out}
.menu[open] .chev{rotate:180deg}
.nav-more{position:relative}
.nav-more ul{position:absolute;top:100%;right:clamp(9px,1vw,14px);min-width:260px;max-width:360px;max-height:calc(100vh - var(--head-h) - 16px);overflow:auto;margin:0;padding:6px 0;list-style:none;background:var(--head-bg);border:1px solid var(--head-rule);border-top:0}
.nav-more ul li+li{border-top:1px solid var(--head-rule)}
.nav-more ul a{display:block;padding:11px 18px;color:var(--head-ink);font:500 15px/1.35 var(--ui);text-decoration:none}
.nav-more ul a:hover,.nav-more ul a[aria-current],.head-menu a[aria-current]{text-decoration:underline;text-decoration-color:var(--head-mark);text-decoration-thickness:3px;text-underline-offset:5px}
.head-menu{display:none}
.head-menu>summary{display:flex;align-items:center;gap:12px;height:44px;cursor:pointer;color:var(--head-ink);font:600 15px/1 var(--ui)}
.menu-i{position:relative;display:inline-block;width:44px;height:44px;background:var(--accent)}
.menu-i i,.menu-i::before,.menu-i::after{content:"";position:absolute;left:12px;right:12px;height:2px;background:var(--accent-ink);transition:rotate .18s ease-out,translate .18s ease-out,opacity .15s}
.menu-i::before{top:15px}.menu-i i{top:21px}.menu-i::after{top:27px}
.head-menu[open] .menu-i::before{translate:0 6px;rotate:45deg}.head-menu[open] .menu-i::after{translate:0 -6px;rotate:-45deg}.head-menu[open] .menu-i i{opacity:0}
.head-menu>nav{position:absolute;top:100%;left:0;right:0;max-height:calc(100vh - var(--head-h));max-height:calc(100dvh - var(--head-h));overflow:auto;overscroll-behavior:contain;background:var(--head-bg);border-bottom:1px solid var(--head-rule)}
.head-menu ul{margin:0;padding:4px 0 12px;list-style:none}
.head-menu li{margin:0}
.head-menu li+li{border-top:1px solid var(--head-rule)}
.head-menu li a{display:block;padding:14px var(--gutter);color:var(--head-ink);font:600 17px/1.3 var(--ui);text-decoration:none}
.head-menu li.minor a{padding-top:11px;padding-bottom:11px;font-size:15.5px;font-weight:500}
.head-menu li:not(.minor)+li.minor{border-top-width:3px}

/* Calm hero: title, one sentence and the facts line on the page ground; no art, no motion */
.page-hero{padding:clamp(34px,5vw,64px) 0 clamp(26px,3.4vw,40px);border-bottom:1px solid var(--rule)}
.page-hero .kicker{margin:0 0 14px}
.page-hero h1{max-width:24ch}
.page-hero .lead{max-width:40em;margin:18px 0 0;font-size:clamp(18px,1.5vw,20px);line-height:1.55}
.page-hero .meta{margin:16px 0 0}
.page-hero .byline{margin:18px 0 0;font:600 15px/1.45 var(--ui)}
.page-hero .testing{max-width:44em;margin:4px 0 0;font-size:15px;line-height:1.5;color:var(--muted)}
.sec{padding:clamp(34px,4.4vw,56px) 0}
.sec+.sec,.sec+.review-list{border-top:1px solid var(--rule)}
.prose{max-width:var(--read)}
.center{text-align:center;margin-left:auto;margin-right:auto}

/* Running paragraphs justified with hyphens at every width (owner, 29 September: "Not everywhere but mostly";
   2 October: "Wherever possible make the pharagraphs in justify format if it not in a casino box or somewhere where
   it needs to be in middle or on the right. Check on all pages"): the reading text, the leads, the review notes, the
   picks and the questions. Headings, cards, tables, lists, captions, buttons, centred heroes and the footer keep
   their own alignment. */
.justify :is(.prose,.doc-sec,.review-body,.md-body,.panel,.lead-text,.faq-item,.author-box div,.home-copy,.hub-hero .wrap,.doc-hero .wrap,.review-side,.pick,.sources-sec .wrap)>p{text-align:justify;-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:6 3 2}
@media (min-width:861px){.justify .case-hero p.testing{text-align:justify;-webkit-hyphens:auto;hyphens:auto}}

/* Buttons: rectangular, the accent colour */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:10px 18px;background:var(--accent);color:var(--accent-ink);border-radius:var(--radius);font:600 15px/1.2 var(--ui);text-decoration:none}
.btn:hover{text-decoration:underline;text-decoration-thickness:1px}
.btn svg{flex:none}
.page-links{display:flex;flex-wrap:wrap;gap:10px 12px;list-style:none;margin:1.2em 0 0;padding:0}
.page-links li{margin:0}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:16px 0 0}
.cta .small{font-size:13px;color:var(--muted)}

/* Casino name tiles (no logo file yet) and logo tiles (a logo the site binds by checksum) */
.tile{display:flex;align-items:center;justify-content:center;width:100%;min-height:84px;padding:12px 16px;background:var(--tile-bg);color:var(--tile-ink);border-radius:var(--radius);font:var(--display-weight) 21px/1.1 var(--display);letter-spacing:-.01em;text-align:center;text-wrap:balance}
.tile img{display:block;width:100%;height:60px;max-width:var(--nat,100%);object-fit:contain}

/* The at-a-glance grid: one card per casino, contents centred, the rating badge in the top right corner,
   the offer across the card, wagering and first deposit side by side, payment methods as text */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,218px),1fr));gap:18px;margin:0;padding:0;list-style:none}
/* one to three casinos: cards keep a readable width instead of stretching across the row */
.cards:not(:has(>li:nth-child(4))){grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),340px))}
.cards>li{margin:0}
/* Balanced rows (owner, 2 October: symmetrical grids): the builder sets how many cards a row holds (kinds/parts.mjs
   balancedCols), the rows are centred, so a short last row sits in the middle instead of trailing on the left */
.cards.bal{--cols:4;--gap:18px;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--gap)}
.cards.bal>li{flex:0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));min-width:0}
.cards.bal.lg-1{--cols:1}.cards.bal.lg-2{--cols:2}.cards.bal.lg-3{--cols:3}.cards.bal.lg-4{--cols:4}
.card{position:relative;font-family:var(--ui);display:flex;flex-direction:column;align-items:center;gap:12px;height:100%;padding:16px 16px 20px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);text-align:center}
.card.current{border:2px solid var(--ink);padding:15px 15px 19px}
.card .badge+.tile{padding-left:50px;padding-right:50px}
.card h3{margin:0;font-size:20px}
.card h3 a{color:inherit}
.card .blurb{margin:0;font-size:15.5px;line-height:1.5}
.card .note{margin:0;font-size:14px;color:var(--muted)}
.card dl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 12px;width:100%;margin:0}
.card dl>div{min-width:0}
.card .f-wide{grid-column:1/-1}
.card dt{font:600 11.5px/1.3 var(--mono);letter-spacing:.03em;text-transform:uppercase;color:var(--muted)}
.card dd{margin:3px 0 0;font:600 15.5px/1.35 var(--ui)}
.badge{position:absolute;top:10px;right:10px;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:54px;min-height:54px;padding:6px 8px;background:var(--badge-bg);color:var(--badge-ink);border-radius:var(--radius);text-align:center}
.badge small{display:block;font:600 9.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.badge b{display:block;margin-top:3px;font:var(--display-weight) 21px/1 var(--display);font-variant-numeric:tabular-nums}
.pay{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;margin:4px 0 0;padding:0;list-style:none}
.pay li{margin:0;padding:3px 8px;background:var(--tint);border-radius:var(--radius);font:600 12.5px/1.35 var(--ui);color:var(--ink)}
.pay li.more-n{flex-basis:100%;padding:2px 0 0;background:none;color:var(--muted)}
.after-cards{max-width:var(--read);margin:22px 0}

/* Tables: horizontal scroll inside their box on small screens, the casino column stays in view */
.tablewrap{overflow-x:auto;margin:0 0 1.4em;background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius)}
table{width:100%;border-collapse:collapse;font:400 15px/1.45 var(--ui);overflow-wrap:normal}
.tablewrap table{min-width:720px}
.tablewrap.narrow table{min-width:0}
th,td{padding:10px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--rule)}
thead th{background:var(--tint);color:var(--ink);font:600 12px/1.35 var(--mono);letter-spacing:.05em;text-transform:uppercase}
tbody th{font-weight:700;background:var(--surface)}
tbody tr:last-child>*{border-bottom:0}
.tablewrap tbody th{position:sticky;left:0}
.tablewrap thead th:first-child{position:sticky;left:0;z-index:1}
td .btn{min-height:38px;padding:8px 12px;font-size:14px;white-space:nowrap}

/* On this page */
.toc{padding:18px 22px;background:var(--tint);border-radius:var(--radius)}
.toc ol{margin:10px 0 0;padding-left:1.3em;columns:2 17em;column-gap:36px;font:500 15px/1.4 var(--ui)}
.toc li{break-inside:avoid;margin:0 0 7px}
.toc li::marker,.doc-toc li::marker{font-variant-numeric:normal}
.toc ol.own-numbers{list-style:none;padding-left:0}

/* Sister reviews */
.review{padding:clamp(26px,3vw,38px) 0 0}
.review+.review{margin-top:clamp(26px,3vw,38px);border-top:1px solid var(--rule)}
.review-head{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:16px;margin:0 0 16px}
.review-head .tile{width:150px;min-height:64px;padding:8px 10px;font-size:18px}
.review-head h3{margin:0;font-size:clamp(22px,2vw,26px)}
.review-grid{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:start}
.review-body{max-width:var(--read)}
.rating{display:flex;align-items:center;gap:14px;margin:0 0 10px}
.rating .badge{position:static;flex:none}
.rating .val{margin:0;font:600 16px/1.35 var(--ui)}
.why{margin:0 0 12px;font:400 15px/1.5 var(--ui);color:var(--muted)}
.tags-h{margin:14px 0 6px;font:600 12px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.tags{margin:0;padding-left:1.1em;font-size:15.5px;line-height:1.45}
.suits{margin:1em 0 0;padding-left:14px;border-left:3px solid var(--accent);font-weight:600}
.entries{margin:0;padding:0;list-style:none}
.entries li{margin:0;padding:12px 0;border-top:1px solid var(--rule)}
.entries li b{display:block}

/* Help services */
.help-links{display:grid;gap:10px;max-width:34em;margin:1em 0 0;padding:0;list-style:none}
.help-links li{margin:0}
.help-links a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:12px 16px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);color:var(--ink);font:600 17px/1.3 var(--ui);text-decoration:none}
.help-links a:hover{text-decoration:underline}

/* Questions, sources, author */
.faq-item{padding:16px 0;border-top:1px solid var(--rule)}
.faq-item h3{margin:0 0 6px;font-size:19px}
.faq-item p{margin:0}
/* A question folds: the whole question line is the control, a plus that turns to a minus when open */
.faq-item>summary{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;min-height:44px;cursor:pointer;list-style:none}
.faq-item>summary::-webkit-details-marker{display:none}
.faq-item>summary h3{margin:0}
.faq-item>summary::after{content:"";flex:none;width:14px;height:14px;margin-top:.4em;background:linear-gradient(currentColor,currentColor) center/100% 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 100% no-repeat;transition:background-size .2s cubic-bezier(.25,1,.5,1)}
.faq-item[open]>summary::after{background-size:100% 2px,2px 0}
.faq-item>summary:hover h3{text-decoration:underline;text-underline-offset:3px}
.faq-item>summary:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
@media (prefers-reduced-motion:reduce){.faq-item>summary::after{transition:none}}
.sources{margin:0;padding-left:1.4em;font-size:15px;line-height:1.5}
.sources li{margin:0 0 7px}
/* Sources by home domain: the domain, then what its pages were used for, how many and when */
ul.sources:has(.src-domain){padding-left:0;list-style:none}
ul.sources:has(.src-domain) li{margin:0 0 14px}
.src-domain{display:block;font:600 16px/1.35 var(--ui);color:var(--ink)}
a.src-domain{color:var(--link)}
.src-uses{display:block;color:var(--muted)}
.read{font:400 12.5px/1.4 var(--mono);color:var(--muted);white-space:nowrap}
.author-box{display:flex;gap:18px;align-items:flex-start;max-width:var(--read);padding:20px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius)}
.author-box .mark{flex:none;display:grid;place-items:center;width:54px;height:54px;background:var(--tile-bg);color:var(--tile-ink);border-radius:var(--radius);font:var(--display-weight) 19px/1 var(--display)}
.author-box p{margin:.4em 0 0;font-size:16px}
/* The author box at the bottom of the home page and the articles (owner, 2 October): the site's mark in a round
   seal, the builder's label, the name and role, the bio and the about, method and contact links */
.author-box.ab{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(16px,2.4vw,28px);align-items:start;max-width:none;padding:clamp(20px,3vw,34px);border-left:4px solid var(--accent)}
.author-box .ab-mark{width:76px;height:76px;border-radius:50%;background:var(--tint);border:1px solid var(--rule);font-size:24px}
.author-box .ab-mark svg{display:block;width:44px;height:44px}
.author-box .ab-label{margin:0;font:500 12px/1.3 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.author-box.ab .author-h{margin:.25em 0 0;font-size:clamp(22px,2.2vw,30px);line-height:1.15}
.author-box.ab .author-h a{color:inherit}
/* a name written mid-sentence ("the Octomark research team") opens the heading with a capital, in the CSS only */
.author-box.ab .author-h::first-letter{text-transform:uppercase}
.author-box .ab-role{margin:.2em 0 0;font:500 14px/1.4 var(--ui);color:var(--muted)}
.author-box .ab-bio p{font-size:17px;line-height:1.6}
.author-box .ab-links,.author-box .page-links-plain{margin-top:14px}

/* Article: the short answer, then the grid. On phones the grid comes straight after the title block and the short
   answer follows it (owner, 29 September: "Grid first"); the order is CSS only, the HTML keeps the brief's order. */
.art{display:flex;flex-direction:column}
.lead-text{max-width:var(--read)}
.lead-text .lede{display:block;margin:0 0 .5em;text-align:left;font:var(--display-weight) clamp(21px,2vw,27px)/1.3 var(--display);letter-spacing:-.01em;color:var(--ink)}
.quick h2{margin-bottom:.8em}
.toc-strip{padding:0 0 clamp(26px,3vw,40px)}

/* Doc pages: one reading column beside an open contents list */
.doc-grid{display:grid;grid-template-columns:minmax(0,250px) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start;padding-top:clamp(32px,4.4vw,56px);padding-bottom:clamp(32px,4.4vw,56px)}
.doc-toc{position:sticky;top:calc(var(--head-h) + 24px);max-height:calc(100vh - var(--head-h) - 48px);overflow:auto;padding:18px 20px;background:var(--tint);border-radius:var(--radius)}
.doc-toc ol{margin:10px 0 0;padding-left:1.2em;font:500 14.5px/1.4 var(--ui)}
.doc-toc li{margin:0 0 8px}
.doc-toc ol.own-numbers{list-style:none;padding-left:0}
.doc-body{min-width:0;max-width:var(--read)}
.doc-sec+.doc-sec{margin-top:clamp(34px,3.8vw,50px)}

/* Markdown pages: operator fact box and status bar, post key grid, panels, quotes, register lists */
.status-bar{background:var(--status-bg);color:var(--status-ink)}
.status-bar p{margin:0;padding:11px 0;font:700 13px/1.3 var(--mono);letter-spacing:.07em;text-transform:uppercase}
.md-body{padding:clamp(30px,4vw,48px) 0 0}
.md-body>*{max-width:var(--read)}
.md-body>h2{margin-top:clamp(30px,3.6vw,46px)}
.md-body>h3{margin-top:1.2em}
/* a wide table uses the full content width; text, the fact box and the key grid keep the reading measure */
.md-body>.tablewrap{max-width:none}
.fact-box{margin:0 0 1.6em;padding:4px 20px;background:var(--tint);border-radius:var(--radius)}
.fact-box>div{display:grid;grid-template-columns:minmax(0,210px) minmax(0,1fr);gap:4px 20px;padding:12px 0;border-bottom:1px solid var(--tint-rule)}
.fact-box>div:last-child{border-bottom:0}
.fact-box dt{font:700 12px/1.45 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink)}
.fact-box dd{margin:0;font:400 16px/1.5 var(--ui)}
.key-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1px;margin:0 0 1.6em;background:var(--tint-rule);border:1px solid var(--tint-rule);border-radius:var(--radius);overflow:hidden}
.key-grid>div{min-width:0;padding:12px 14px;background:var(--tint)}
.key-grid dt{font:600 11.5px/1.35 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.key-grid dd{margin:3px 0 0;font:400 16px/1.45 var(--ui)}
.panel{margin:0 0 1.4em;padding:16px 20px;background:var(--p-bg);border-left:4px solid var(--p-ink);border-radius:var(--radius)}
.panel>:last-child{margin-bottom:0}
.panel-label{margin:0 0 8px;font:700 12.5px/1.35 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--p-ink)}
.panel-warning{--p-bg:var(--warn-bg);--p-ink:var(--warn-ink)}
.panel-confirmed{--p-bg:var(--ok-bg);--p-ink:var(--ok-ink)}
.panel-claim{--p-bg:var(--claim-bg);--p-ink:var(--claim-ink)}
.quote{margin:0 0 1.4em;padding:14px 18px;background:var(--tint);border-left:3px solid var(--ink);border-radius:var(--radius)}
.quote blockquote{margin:0;font-style:italic}
.quote blockquote p:last-child{margin:0}
.quote figcaption{margin:8px 0 0;font:400 13px/1.45 var(--mono);color:var(--ink)}
ol.long{columns:2 16em;column-gap:32px}
ol.long li{break-inside:avoid}
ol.register{font-variant-numeric:tabular-nums}

/* Markdown blocks (owner, 1 October: the casinos' own logos and the good general elements of our other sites).
   Logo cards use the grid's card rules (contents centred, the rating badge top right, the offer across the card,
   wagering and first deposit on one line, one card per row on phones) at the full content width, with the domain
   under the name and the source at the card's foot. The key facts box reads like the NZ "at a glance" facts: a small
   label over a strong figure (the figures of a row on one line), a longer value across the box, and its source line. Questions are headings with every
   answer shown at load. A table row may carry its page's logo, small, above the name (the A to Z). */
.block-label{margin:0 0 12px}
.md-body>.md-cards{max-width:none;margin:0 0 1.6em}
.card .domain{margin:-6px 0 0;font:500 14px/1.4 var(--mono);color:var(--muted);overflow-wrap:anywhere}
.card .card-points{align-self:stretch;text-align:left}
.card .card-points .tags-h:first-child{margin-top:0}
.card .card-source{margin:auto 0 0;font:400 12.5px/1.45 var(--ui);color:var(--muted);text-wrap:balance}
.facts{margin:0 0 1.6em;padding:14px 20px 12px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius)}
.facts>.block-label{margin:2px 0 2px}
.facts dl{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,140px),1fr));column-gap:20px;margin:0}
.facts dl>div{display:flex;flex-direction:column;min-width:0;padding:10px 0;border-bottom:1px solid var(--rule)}
.facts .f-wide{grid-column:1/-1}
.facts dt{font:600 11.5px/1.35 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.facts dd{margin:auto 0 0;padding-top:4px;font:var(--display-weight) clamp(18px,12px + 1.6vw,22px)/1.2 var(--display);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.facts .f-wide dd{font:600 16px/1.45 var(--ui);letter-spacing:0}
.facts-source{margin:10px 0 0;font:400 13px/1.45 var(--mono);color:var(--muted)}
.md-body>.faq-list{margin:0 0 1.6em}
.faq-list>.block-label{margin-bottom:8px}
.faq-item>:not(h3)+*{margin-top:.6em}
.faq-item>:last-child{margin-bottom:0}
.row-logo{display:block;width:fit-content;margin:0 0 6px;padding:3px 6px;background:var(--tile-bg);border-radius:var(--radius)}
.row-logo img{display:block;width:auto;height:22px;max-width:110px;object-fit:contain}
/* A logo drawn in white for a dark page (its manifest says background: dark) sits on the site's ink colour; only the
   image is on that ground, so the card's own text keeps its colours. */
.tile.on-dark,.row-logo.on-dark{background:var(--ink)}
/* the rating badge keeps its own edge where it overlaps a dark tile */
.card:has(>.tile.on-dark)>.badge{outline:2px solid var(--surface)}

/* 404 */
.nf{padding:clamp(56px,9vw,120px) 0}
.nf h1{max-width:18ch}
.nf p{max-width:36em;margin:18px 0 26px}

/* Footer: groups of links, the help services, the 18+ line with the site's disclaimer, the short affiliate label
   (owner, 30 September: in the footer only, not at each button) and the copyright */
.site-foot{margin-top:clamp(48px,6vw,88px);background:var(--foot-bg);color:var(--foot-ink)}
.site-foot a{color:var(--foot-ink)}
.foot-in{max-width:calc(var(--max) + 2 * var(--gutter));margin:0 auto;padding:clamp(36px,5vw,60px) var(--gutter) 26px}
.foot-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:32px 48px}
.foot-logo{display:inline-flex;align-items:center;gap:.4em;font:var(--display-weight) 26px/1 var(--display);letter-spacing:-.02em;text-decoration:none}
.foot-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:28px 36px}
.foot-h{margin:0 0 12px;font:700 12px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.foot-group ul{display:grid;gap:9px;margin:0;padding:0;list-style:none;font:500 15px/1.4 var(--ui)}
.foot-group li{margin:0}
.foot-help li{display:flex;flex-direction:column}
.foot-help .tel{font-weight:700;white-space:nowrap}
.foot-help .area{font-size:13.5px}
.foot-age{display:flex;align-items:flex-start;gap:12px;max-width:52em;margin:36px 0 0;font:500 14.5px/1.5 var(--ui)}
.age{flex:none;display:inline-grid;place-items:center;min-width:42px;height:28px;padding:0 6px;border:1.5px solid currentColor;border-radius:var(--radius);font:700 13px/1 var(--mono)}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;margin-top:22px;padding-top:18px;border-top:1px solid var(--foot-rule);font:500 14px/1.5 var(--ui)}
.aff{font:700 12px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase}

/* Motion is only hover and focus feedback; text never waits for it */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

@media (max-width:1023px){
.head-nav{display:none}.head-menu{display:block}
.review-grid{grid-template-columns:1fr}
.foot-top{grid-template-columns:1fr}
}
@media (max-width:1023px){.cards.bal.md-1{--cols:1}.cards.bal.md-2{--cols:2}}
@media (max-width:900px){
.doc-grid{grid-template-columns:1fr}.doc-toc{position:static;max-height:none}
}
@media (max-width:860px){
.art>.art-hero,.art>.quick{order:-1}
.art>.art-hero{border-bottom:0}
}
@media (max-width:700px){
:root{--head-h:58px}
body{font-size:17px}
.head-logo{font-size:22px}.wm-svg{height:26px}
.cards,.cards:not(:has(>li:nth-child(4))){grid-template-columns:minmax(0,1fr)}
.cards.bal[class]{--cols:1}
.author-box.ab{grid-template-columns:minmax(0,1fr)}
.author-box .ab-mark{width:60px;height:60px}
.fact-box>div{grid-template-columns:1fr}
.key-grid{grid-template-columns:1fr}
.toc ol{columns:1}
.review-head{grid-template-columns:1fr;gap:12px}
.review-head .tile{width:100%}
.foot-groups{grid-template-columns:repeat(2,minmax(0,1fr))}
ol.long{columns:1}
}
@media (max-width:420px){.foot-groups{grid-template-columns:1fr}}

/* site */
/* Puntide (guidesuk): the site's own layer over the shared base, design pass of 2 October 2026.
   Reference: The Markup (themarkup.org), the approved brand reference (tokens.json). This pass takes its blog
   structure: a lead story, story cards with a kicker, headline, dek and a record line, an article column with a
   byline row, evidence set apart in monospace, dotted dividers. Every colour is a Puntide token: tide #1E2842,
   paper #FFFFFF, ground #F2F1EE, shade #635E57, rule #CBC6BF, buoy #D6352A, buoy-text #B42A20, buoy-tint #FBE4E1,
   sea #1D6B5E, sea-tint #E1EFEB, amber #8A5A00, amber-tint #FAEFD6. Nothing waits for a scroll or a timer. */

:root{--read:42rem;--dots:radial-gradient(circle,#CBC6BF 1px,transparent 1.4px) 0 50%/5px 5px repeat-x}
body{font-size:19px;line-height:1.62;font-variation-settings:"opsz" 16}
h1,h2{font-variation-settings:"opsz" 72}
h1{font-size:clamp(34px,5vw,56px);line-height:1.06;letter-spacing:-.022em}
h2{letter-spacing:-.015em}
::selection{background:#FBE4E1;color:#1E2842}

/* Header: the wordmark with its buoy dot, drawn as text in the display face */
.wm-svg{height:32px}
.site-head{border-bottom:0}
.foot-logo .wm-svg{height:36px}

/* The dotted divider (the reference's dot rows, in rule colour) */
.page-hero{position:relative;border-bottom:0;padding-bottom:clamp(30px,3.6vw,44px)}
.page-hero::after,.sec+.sec::before{content:"";display:block;height:6px;background:var(--dots)}
.page-hero::after{position:absolute;left:0;right:0;bottom:0}
.sec+.sec{border-top:0;position:relative}
.sec+.sec::before{position:absolute;top:0;left:0;right:0}

/* Kickers: small labels in the record face; a Warning post wears the buoy tint (it warns), a Guide the tide */
.kicker,.post-card .label{display:inline-block;width:auto;padding:4px 8px 3px;border-radius:2px;background:#F2F1EE;color:#1E2842;font:500 11.5px/1.2 var(--mono);letter-spacing:.08em}
.page-hero .kicker{margin-bottom:18px}

/* ---------- Home and hub ---------- */
.hub .page-hero{background:#F2F1EE;padding-top:clamp(40px,6vw,84px);padding-bottom:clamp(36px,5vw,64px)}
.hub .page-hero h1{max-width:19ch;font-size:clamp(36px,5.6vw,64px)}
.hub .page-hero .lead{max-width:36em;margin-top:22px;font-size:clamp(18px,1.6vw,21px);line-height:1.55;color:#1E2842}
.hub .page-hero .kicker{background:#FFFFFF}

/* Section heads that hold the post grid read as the reference's section labels */
.hub .sec:has(.post-card)>.wrap>h2{display:flex;align-items:center;gap:14px;margin:0 0 22px;font:500 13px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#635E57}
.hub .sec:has(.post-card)>.wrap>h2::after{content:"";flex:1;height:6px;background:var(--dots)}
.hub .sec:has(.post-card)>.wrap>.prose{max-width:40em;margin-bottom:28px;font-size:18px;color:#635E57}
.hub .sec:has(.post-card)>.wrap>.prose a{color:#1E2842}

/* Story cards: left aligned, no box; a tide rule on top, kicker, headline, dek, record line */
.cards:has(.post-card){grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 36px}
/* The template's balanced card rows (merged 4 Oct) are a centred flex row; the story grid keeps its own columns and the full-width lead story */
.cards.bal:has(.post-card){display:grid;justify-content:normal}
.cards.bal:has(.post-card)>li{flex:none}
.post-card{align-items:flex-start;gap:0;padding:18px 0 0;background:none;border:0;border-top:2px solid #1E2842;border-radius:0;text-align:left}
.post-card .label{margin:0 0 14px}
.post-card h3{margin:0 0 10px;font:600 23px/1.18 var(--display);font-variation-settings:"opsz" 48;letter-spacing:-.01em;text-wrap:balance}
.post-card h3 a{text-decoration:none}
.post-card h3 a:hover{text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:#D6352A}
.post-card h3 a::after{content:"";position:absolute;inset:0}
.post-card{position:relative}
.post-card .blurb{margin:0 0 16px;font:400 17px/1.5 var(--body);color:#1E2842;text-align:left}
.post-card .note{margin-top:auto;padding-top:12px;width:100%;background:var(--dots);background-position:0 0;font:400 12.5px/1.45 var(--mono);color:#635E57}
.post-card:hover .note{color:#1E2842}

/* The lead story: the pinned explainer, full width, on the ground colour */
.cards:has(.post-card)>li:first-child{grid-column:1/-1}
.cards:has(.post-card)>li:first-child .post-card{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);column-gap:clamp(28px,4vw,64px);align-items:end;padding:clamp(26px,3.4vw,44px);background:#1E2842;border-top:0;color:#FFFFFF}
.cards:has(.post-card)>li:first-child .label{grid-column:1/-1;justify-self:start;background:#D6352A;color:#FFFFFF}
.cards:has(.post-card)>li:first-child h3{grid-column:1;margin:0;font-size:clamp(30px,3.6vw,46px);line-height:1.06;letter-spacing:-.02em;font-variation-settings:"opsz" 72;color:#FFFFFF}
.cards:has(.post-card)>li:first-child h3 a{color:#FFFFFF}
.cards:has(.post-card)>li:first-child h3 a:hover{text-decoration-color:#D6352A}
.cards:has(.post-card)>li:first-child .blurb{grid-column:2;margin:0;font-size:clamp(18px,1.5vw,20px);color:#FFFFFF}
.cards:has(.post-card)>li:first-child .note{grid-column:1/-1;margin-top:24px;padding-top:14px;background:radial-gradient(circle,#635E57 1px,transparent 1.4px) 0 0/5px 5px repeat-x;color:#FFFFFF}

/* Warning posts (their kicker says Warning): the buoy tint on the label */
.post-card:has(a[href="/kinghills-sister-sites/"]) .label,
.post-card:has(a[href="/cocoa-casino-sister-sites/"]) .label,
.post-card:has(a[href="/true-fortune-sister-sites/"]) .label,
html:has(link[rel=canonical][href$="/kinghills-sister-sites/"]) .page-hero .kicker,
html:has(link[rel=canonical][href$="/cocoa-casino-sister-sites/"]) .page-hero .kicker,
html:has(link[rel=canonical][href$="/true-fortune-sister-sites/"]) .page-hero .kicker{background:#FBE4E1;color:#B42A20}

/* The buttons under a grid read as plain "read" links, not slabs */
.hub .page-links .btn,.md .page-links .btn{min-height:44px;padding:8px 0;background:none;color:#1E2842;border-bottom:2px solid #1E2842;border-radius:0;font-weight:600}
.hub .page-links .btn:hover{color:#B42A20;border-color:#D6352A;text-decoration:none}
.hub .page-links{gap:6px 28px}

/* The two closing sections of the home page sit side by side on the ground colour */
.hub .sec:not(:has(.post-card)) h2{font-size:clamp(26px,2.8vw,34px)}
.hub .sec:not(:has(.post-card)) .prose{max-width:38em}
.hub .after-cards{max-width:40em;margin:40px 0 8px}
.hub .after-cards p{color:#1E2842}

/* ---------- Posts (Markdown) ---------- */
.md .page-hero .wrap,.md>.wrap{max-width:calc(var(--read) + 2 * var(--gutter))}
.md .page-hero{padding-top:clamp(36px,5.4vw,72px)}
.md .page-hero h1{max-width:none;font-size:clamp(32px,4.6vw,50px)}
.md .page-hero .byline{display:inline;margin:0;font:600 15px/1.5 var(--ui)}
.md .page-hero .byline a{color:#1E2842;text-decoration-color:#D6352A;text-decoration-thickness:2px}
.md .page-hero .byline+.meta::before{content:"\00B7";margin:0 10px;color:#635E57}
.md .page-hero .byline+.meta{display:inline;margin:0;font:400 13.5px/1.5 var(--mono)}
.md .page-hero h1+.byline{display:inline-block;margin-top:22px}
.md-body{padding-top:clamp(28px,3.6vw,40px)}
.md-body>h2{margin-top:clamp(40px,4.4vw,56px);font-size:clamp(25px,2.6vw,31px)}
.md-body>h3{font:700 18px/1.3 var(--ui)}
.md-body>p,.md-body>ul,.md-body>ol{font-size:19px}
.md-body>p:first-of-type{font-size:clamp(20px,1.8vw,22px);line-height:1.55}
.md-body li::marker{color:#635E57}

/* The one "at a glance" grid: label over value, the rating row across the grid */
.key-grid{margin:0 0 2em;background:#CBC6BF;border:0;border-radius:2px;gap:1px;border-top:3px solid #1E2842}
.key-grid>div{padding:14px 16px 15px;background:#F2F1EE}
.key-grid dt{color:#635E57;font:500 11.5px/1.35 var(--mono);letter-spacing:.08em}
.key-grid dd{margin-top:5px;font:500 16.5px/1.4 var(--ui);color:#1E2842}
.key-grid>div:nth-last-child(2):nth-child(odd){grid-column:1/-1}
.key-grid>div:last-child{grid-column:1/-1;display:flex;align-items:baseline;gap:16px;padding:16px 16px 17px;background:#1E2842}
.key-grid>div:last-child dt{color:#FFFFFF}
.key-grid>div:last-child dd{margin:0;font:600 20px/1.35 var(--display);font-variation-settings:"opsz" 24;color:#FFFFFF}

/* Panels and quotes: tinted grounds with a full hairline, the label in the record face */
.panel{border-left:0;border:1px solid var(--p-ink);padding:18px 22px}
.quote{margin:0 0 1.6em;padding:22px 24px 18px;background:#F2F1EE;border-left:0;border-radius:2px;position:relative}
.quote::before{content:"\201C";position:absolute;top:-6px;left:18px;font:600 64px/1 var(--display);color:#D6352A}
.quote blockquote{padding-top:14px;font-size:18px;line-height:1.55}
.quote figcaption{margin-top:14px;padding-top:12px;background:var(--dots);background-position:0 0;color:#635E57}

/* Logo cards in a post: two across in the reading column */
.md-body>.md-cards{max-width:var(--read)}
.md-cards .block-label{font:500 12px/1.3 var(--mono);letter-spacing:.08em;color:#635E57}
.md-cards .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.md-cards .card{padding:14px 14px 16px;border-color:#CBC6BF;background:#FFFFFF;gap:10px}
.md-cards .card .tile{min-height:76px;background:#F2F1EE}
.md-cards .card .tile.on-dark{background:#1E2842}
.md-cards .card .badge+.tile{padding-left:12px;padding-right:58px}
.md-cards .card h3{font:600 20px/1.2 var(--display)}
.md-cards .card h3 a{text-decoration:none}
.md-cards .card .card-source{font-size:12.5px}
.md-cards .card .card-source a{color:#635E57}
.badge{background:#1E2842;color:#FFFFFF}

/* Questions: each a ruled entry; the answer reads like the text */
.faq-list{margin-top:4px}
.faq-item{padding:18px 0 16px;border-top:1px solid #CBC6BF}
.faq-item:last-child{border-bottom:1px solid #CBC6BF}
.faq-item h3{font:700 18px/1.35 var(--ui);margin-bottom:8px}
.faq-item p{font-size:18px}

/* Sources: numbered evidence in the record face */
.md-body ol.sources,.md-body ul.sources{padding-left:0;list-style:none;counter-reset:src;font:400 14px/1.6 var(--mono);color:#1E2842;text-align:left}
.md-body ol.sources>li{position:relative;margin:0;padding:10px 0 10px 36px;counter-increment:src;border-top:1px solid #CBC6BF}
.md-body ol.sources>li::before{content:counter(src);position:absolute;left:0;top:10px;width:24px;font-weight:500;color:#B42A20}

/* Author box at the foot of a post */
.md-author{margin-top:clamp(40px,4.4vw,56px)}
.author-box{padding:22px 24px;background:#F2F1EE;border:0;border-top:3px solid #1E2842;border-radius:0}
.author-box .mark{position:relative;background:#1E2842;color:#FFFFFF;border-radius:2px}
.author-box .mark::after{content:"";position:absolute;top:-4px;right:-4px;width:11px;height:11px;border-radius:50%;background:#D6352A}
.author-box b a{color:#1E2842}

/* ---------- Site pages ---------- */
.doc-toc{background:#F2F1EE;border-top:3px solid #1E2842;border-radius:0}
.doc-toc .label{color:#635E57}
.doc-toc a{color:#1E2842;text-decoration:none}
.doc-toc a:hover{text-decoration:underline;text-decoration-color:#D6352A}

/* Footer: the wordmark a touch larger, links without heavy underlines */
.site-foot a{text-decoration-color:#635E57}
.site-foot a:hover{text-decoration-color:#D6352A}

/* ---------- Fix round, 2 October 2026 ---------- */
/* Running text justified on wide screens wherever it is not in a card or a centred block: the home intro, the
   numbered terms lists and the plain lists of a post (phones stay left aligned, the shared check's rule) */
@media (min-width:701px){
.hub .sec .prose>p,.md-body>ol:not(.sources)>li,.md-body>ul:not(.sources)>li,.panel li{text-align:justify;-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:6 3 2}
}

/* Home and hub heroes: the title and its dek side by side on wide screens, the dek set off by a buoy rule; the dek is a
   standfirst beside the title, so it stays left aligned (justified it opened rivers around the brand list) */
.hub .page-hero .lead{position:relative;padding-top:18px}
.hub .page-hero .lead::before{content:"";position:absolute;top:0;left:0;width:56px;height:3px;background:#D6352A}
@media (min-width:1024px){
.hub .page-hero .wrap:has(.lead){display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:clamp(40px,5vw,80px);align-items:end}
.hub .page-hero .wrap:has(.lead) h1{max-width:none}
.hub .page-hero .wrap:has(.lead) .lead{max-width:34em;margin:0 0 6px;text-align:left;text-wrap:pretty}
}

/* Home: the two closing sections (method and author) side by side at the site's width, a dotted rule between */
@media (min-width:1024px){
html:has(link[rel=canonical][href="https://puntide.co.uk/"]) main.hub{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,calc(var(--max) / 2 + var(--gutter))) minmax(0,calc(var(--max) / 2 + var(--gutter))) minmax(0,1fr)}
html:has(link[rel=canonical][href="https://puntide.co.uk/"]) main.hub>*{grid-column:1/-1}
html:has(link[rel=canonical][href="https://puntide.co.uk/"]) main.hub>.sec:has(#how-we-decide-two-casinos-are-sisters){grid-column:2;padding-right:clamp(20px,2.4vw,36px)}
html:has(link[rel=canonical][href="https://puntide.co.uk/"]) main.hub>.sec:has(#who-writes-puntide){grid-column:3;padding-left:clamp(20px,2.4vw,36px);background:radial-gradient(circle,#CBC6BF 1px,transparent 1.4px) 0 0/6px 5px repeat-y}
html:has(link[rel=canonical][href="https://puntide.co.uk/"]) main.hub>.sec:has(#how-we-decide-two-casinos-are-sisters)>.wrap{padding-right:0}
html:has(link[rel=canonical][href="https://puntide.co.uk/"]) main.hub>.sec:has(#who-writes-puntide)>.wrap{padding-left:clamp(20px,2.4vw,36px)}
html:has(link[rel=canonical][href="https://puntide.co.uk/"]) main.hub>.sec:has(#who-writes-puntide)::before{display:none}
html:has(link[rel=canonical][href="https://puntide.co.uk/"]) main.hub>.sec:not(:has(.post-card)) .prose{max-width:none}
html:has(link[rel=canonical][href="https://puntide.co.uk/"]) main.hub>.sec:not(:has(.post-card)) h2{font-size:clamp(26px,2.4vw,32px)}
}

/* Hub: its own structure, an index rather than the home page's story grid. One row per post (label, headline, dek,
   record line), grouped by kind: the explainer, the British-licensed families, the Curacao families, then the
   warnings. Order is CSS only; the HTML keeps the post_index order. */
html:has(link[rel=canonical][href$="/sister-sites/"]) .hub .sec:has(.post-card)>.wrap>.prose{max-width:none;columns:2 22em;column-gap:clamp(32px,4vw,56px);margin-bottom:36px;font-size:17px;line-height:1.55}
html:has(link[rel=canonical][href$="/sister-sites/"]) .hub .sec:has(.post-card)>.wrap>.prose p{break-inside:avoid;margin:0 0 .8em}
html:has(link[rel=canonical][href$="/sister-sites/"]) .cards:has(.post-card){display:flex;flex-direction:column;gap:0;border-bottom:2px solid #1E2842}
html:has(link[rel=canonical][href$="/sister-sites/"]) .cards:has(.post-card)>li .post-card,
html:has(link[rel=canonical][href$="/sister-sites/"]) .cards:has(.post-card)>li:first-child .post-card{display:grid;grid-template-columns:150px minmax(0,1.1fr) minmax(0,1fr);grid-template-rows:auto auto;column-gap:clamp(20px,3vw,40px);align-items:start;padding:22px 0 20px;background:none;border-top:1px solid #CBC6BF;color:#1E2842}
html:has(link[rel=canonical][href$="/sister-sites/"]) .cards:has(.post-card)>li:first-child .post-card{border-top:2px solid #1E2842}
html:has(link[rel=canonical][href$="/sister-sites/"]) .post-card .label{grid-column:1;grid-row:1/3;justify-self:start;margin:4px 0 0}
html:has(link[rel=canonical][href$="/sister-sites/"]) .post-card h3,
html:has(link[rel=canonical][href$="/sister-sites/"]) .cards:has(.post-card)>li:first-child h3{grid-column:2;grid-row:1;margin:0;font-size:22px;line-height:1.2;color:#1E2842}
html:has(link[rel=canonical][href$="/sister-sites/"]) .cards:has(.post-card)>li:first-child h3 a{color:#1E2842}
html:has(link[rel=canonical][href$="/sister-sites/"]) .post-card .blurb,
html:has(link[rel=canonical][href$="/sister-sites/"]) .cards:has(.post-card)>li:first-child .blurb{grid-column:3;grid-row:1/3;margin:0;font-size:16.5px;color:#1E2842}
html:has(link[rel=canonical][href$="/sister-sites/"]) .post-card .note,
html:has(link[rel=canonical][href$="/sister-sites/"]) .cards:has(.post-card)>li:first-child .note{grid-column:2;grid-row:2;margin:10px 0 0;padding:0;background:none;color:#635E57}
html:has(link[rel=canonical][href$="/sister-sites/"]) .cards:has(.post-card)>li:first-child .label{background:#1E2842;color:#FFFFFF}
html:has(link[rel=canonical][href$="/sister-sites/"]) .cards:has(.post-card)>li:first-child .post-card{background:#F2F1EE;padding-left:16px;padding-right:16px;margin:0 -16px}
html:has(link[rel=canonical][href$="/sister-sites/"]) .cards>li:has(a[href="/mr-q-sister-sites/"]){order:1}
html:has(link[rel=canonical][href$="/sister-sites/"]) .cards>li:has(a[href="/jackpotjoy-sister-sites/"]){order:2}
html:has(link[rel=canonical][href$="/sister-sites/"]) .cards>li:has(a[href="/gala-bingo-sister-sites/"]){order:3}
html:has(link[rel=canonical][href$="/sister-sites/"]) .cards>li:has(a[href="/mystake-sister-sites/"]){order:4}
html:has(link[rel=canonical][href$="/sister-sites/"]) .cards>li:has(a[href="/donbet-sister-sites/"]){order:5}
html:has(link[rel=canonical][href$="/sister-sites/"]) .cards>li:has(a[href="/velobet-sister-sites/"]){order:6}
html:has(link[rel=canonical][href$="/sister-sites/"]) .cards>li:has(a[href="/kinghills-sister-sites/"]){order:7}
html:has(link[rel=canonical][href$="/sister-sites/"]) .cards>li:has(a[href="/cocoa-casino-sister-sites/"]){order:8}
html:has(link[rel=canonical][href$="/sister-sites/"]) .cards>li:has(a[href="/true-fortune-sister-sites/"]){order:9}
/* the first row of each group carries a heavier rule, so the groups read without new words */
html:has(link[rel=canonical][href$="/sister-sites/"]) .cards>li:has(a[href="/mr-q-sister-sites/"]) .post-card,
html:has(link[rel=canonical][href$="/sister-sites/"]) .cards>li:has(a[href="/mystake-sister-sites/"]) .post-card,
html:has(link[rel=canonical][href$="/sister-sites/"]) .cards>li:has(a[href="/kinghills-sister-sites/"]) .post-card{border-top:2px solid #1E2842;margin-top:26px}
@media (max-width:860px){
html:has(link[rel=canonical][href$="/sister-sites/"]) .cards:has(.post-card)>li .post-card,
html:has(link[rel=canonical][href$="/sister-sites/"]) .cards:has(.post-card)>li:first-child .post-card{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
html:has(link[rel=canonical][href$="/sister-sites/"]) .post-card .label,
html:has(link[rel=canonical][href$="/sister-sites/"]) .post-card h3,
html:has(link[rel=canonical][href$="/sister-sites/"]) .post-card .blurb,
html:has(link[rel=canonical][href$="/sister-sites/"]) .post-card .note,
html:has(link[rel=canonical][href$="/sister-sites/"]) .cards:has(.post-card)>li:first-child h3,
html:has(link[rel=canonical][href$="/sister-sites/"]) .cards:has(.post-card)>li:first-child .blurb,
html:has(link[rel=canonical][href$="/sister-sites/"]) .cards:has(.post-card)>li:first-child .note{grid-column:1;grid-row:auto}
html:has(link[rel=canonical][href$="/sister-sites/"]) .post-card .label{margin:0 0 10px}
html:has(link[rel=canonical][href$="/sister-sites/"]) .post-card .blurb{margin-top:8px}
}

/* Our take: what counts for a casino and what to weigh, as one for/against block, two columns on wide screens */
.md-body>.panel-confirmed:has(+.panel-warning),.md-body>.panel-confirmed+.panel-warning{padding:20px 22px 18px;border:0;border-top:3px solid var(--p-ink);border-radius:0}
.md-body>.panel-confirmed:has(+.panel-warning) .panel-label,.md-body>.panel-confirmed+.panel-warning .panel-label{display:flex;align-items:center;gap:10px;margin-bottom:12px;font:600 12px/1.3 var(--mono);letter-spacing:.09em}
.md-body>.panel-confirmed:has(+.panel-warning) .panel-label::before,.md-body>.panel-confirmed+.panel-warning .panel-label::before{content:"+";display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--p-ink);color:#FFFFFF;font:700 15px/1 var(--ui);letter-spacing:0}
.md-body>.panel-confirmed+.panel-warning .panel-label::before{content:"!"}
.md-body>.panel-confirmed:has(+.panel-warning) ul,.md-body>.panel-confirmed+.panel-warning ul{margin:0;padding:0;list-style:none}
.md-body>.panel-confirmed:has(+.panel-warning) li,.md-body>.panel-confirmed+.panel-warning li{position:relative;margin:0;padding:9px 0 9px 22px;font-size:17px;line-height:1.5;color:#1E2842}
.md-body>.panel-confirmed:has(+.panel-warning) li+li,.md-body>.panel-confirmed+.panel-warning li+li{border-top:1px solid rgba(30,40,66,.14)}
.md-body>.panel-confirmed:has(+.panel-warning) li::before,.md-body>.panel-confirmed+.panel-warning li::before{content:"";position:absolute;left:2px;top:19px;width:8px;height:8px;border-radius:50%;background:var(--p-ink)}
.md-body>.panel-confirmed+.panel-warning li::before{border-radius:1px;height:3px;top:21px;width:10px}
@media (min-width:860px){
.md-body>.panel-confirmed:has(+.panel-warning){float:left;width:calc(50% - 10px);max-width:calc(var(--read) / 2 - 10px);margin:0 0 1.6em}
.md-body>.panel-confirmed+.panel-warning{float:left;width:calc(50% - 10px);max-width:calc(var(--read) / 2 - 10px);margin:0 0 1.6em 20px}
.md-body>.panel-confirmed+.panel-warning+*{clear:both}
}

@media (max-width:1023px){
.cards:has(.post-card){grid-template-columns:repeat(2,minmax(0,1fr))}
.cards:has(.post-card)>li:first-child .post-card{grid-template-columns:1fr}
.cards:has(.post-card)>li:first-child .blurb{grid-column:1;margin-top:16px}
}
@media (max-width:700px){
body{font-size:18px}
.md-body>p,.md-body>ul,.md-body>ol{font-size:18px}
.md-body>p:first-of-type{font-size:19.5px}
.cards:has(.post-card),.cards:not(:has(>li:nth-child(4))):has(.post-card){grid-template-columns:minmax(0,1fr);gap:32px}
.md-cards .cards{grid-template-columns:minmax(0,1fr)}
.wm-svg{height:27px}
.key-grid>div:last-child{display:block}
.key-grid>div:last-child dd{margin-top:5px}
.md .page-hero .byline+.meta{display:block;margin-top:4px}
.md .page-hero .byline+.meta::before{content:none}
}