/* The Pie Shoppe — Canadian Casino Guide · "dune & sunrise" design system */
:root{
  --sand:#fbf6ec; --sand2:#f4ead9; --paper:#ffffff; --ink:#2a2118; --ink2:#5a4d3d;
  --line:#e7dcc6; --gold:#f5c63c; --amber:#ef8f2a; --sun:#ec6d22; --rise:#e2451f; --rise2:#c8371a;
  --lake:#2b6b8c; --lake2:#1f5271; --grn:#2e8b57; --teal:#1f6f6f; --teal2:#175959; --rust:#b5502a; --rust2:#983f1f; --shadow:0 2px 10px rgba(60,40,20,.08);
  --bonusbg:#fff7e9; --bonusln:#f2ddb0;
  --maxw:1080px; --disp:"Oswald","Arial Narrow",system-ui,sans-serif; --body:"Open Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--sand);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.72}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
a{color:var(--lake)}a:hover{color:var(--lake2)}
h1,h2,h3,h4{font-family:var(--disp);font-weight:700;line-height:1.12;letter-spacing:.01em;color:var(--ink)}
img{max-width:100%;height:auto}

/* ---------- masthead ---------- */
.mast{background:var(--paper);border-bottom:1px solid var(--line)}
.mast__in{display:flex;align-items:center;gap:18px;min-height:88px;padding:10px 20px}
.mast__logo{display:flex;align-items:center}
.mast__logo img{height:46px;width:auto}
/* brand wordmark */
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none}
.brand .sundisc{width:52px;height:30px;flex:none}
.brand__txt{display:flex;flex-direction:column;line-height:1}
.brand__name{font-family:var(--disp);font-weight:700;font-size:32px;letter-spacing:.02em;text-transform:uppercase;color:var(--ink)}
.brand__name em{font-style:normal;color:var(--rise)}
.brand__sub{font-family:var(--disp);font-weight:500;font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--sun);margin-top:3px}
.brand:hover .brand__name{color:var(--ink)}
.mast__spacer{flex:1}
.mast__burger{display:none;width:44px;height:40px;border:1px solid var(--line);border-radius:8px;background:var(--paper);cursor:pointer;position:relative}
.mast__burger span{position:absolute;left:12px;top:50%;margin-top:-1px;width:20px;height:2px;background:var(--ink)}
.mast__burger span::before,.mast__burger span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--ink)}
.mast__burger span::before{top:-6px}
.mast__burger span::after{top:6px}
.nav{display:flex;align-items:center;gap:2px}
.nav__group{position:relative}
.nav__top{display:inline-flex;align-items:center;gap:6px;padding:12px 12px;color:var(--ink2);text-decoration:none;font-weight:600;font-size:15px}
.nav__top:hover,.nav__group:hover .nav__top,.nav__group:focus-within .nav__top{color:var(--rise)}
.caret{width:0;height:0;border:4px solid transparent;border-top-color:currentColor;border-bottom:0;margin-top:3px;transition:transform .15s}
.nav__group:hover .caret{transform:rotate(180deg)}
.nav__menu{position:absolute;top:100%;left:0;min-width:236px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 34px rgba(60,40,20,.18);padding:7px;margin:0;list-style:none;display:none;z-index:60}
.nav__group:hover .nav__menu,.nav__group:focus-within .nav__menu{display:block}
.nav__menu li{list-style:none}
.nav__menu a{display:block;padding:9px 12px;border-radius:8px;color:var(--ink);text-decoration:none;font-size:14.5px;white-space:nowrap}
.nav__menu a:hover{background:var(--sand2);color:var(--rise)}
.nav__group:nth-last-of-type(-n+2) .nav__menu{left:auto;right:0}
.claim{display:inline-flex;align-items:center;gap:7px;background:var(--teal);color:#fff;font-family:var(--disp);font-weight:600;text-transform:uppercase;letter-spacing:.04em;padding:11px 18px;border-radius:6px;text-decoration:none;box-shadow:var(--shadow)}
.claim:hover{background:var(--teal2);color:#fff}
.claim svg{width:12px;height:12px;fill:currentColor}
.claim--nav{padding:8px 14px;font-size:14px}
.sunrule{height:4px;background:linear-gradient(90deg,var(--gold),var(--amber),var(--sun),var(--rise))}
.sunrule--hero{height:6px;box-shadow:0 8px 18px -8px rgba(226,69,31,.45)}

/* ---------- hero (distinct band) ---------- */
.hero{position:relative;background:radial-gradient(120% 140% at 15% 0%,#fffdf8 0%,#fdf1dc 45%,#f7e2c0 100%);border-top:1px solid #f0dfc0;box-shadow:inset 0 -18px 30px -22px rgba(120,60,20,.25)}
.hero::after{content:"";position:absolute;right:-60px;top:-40px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(245,198,60,.35),rgba(245,198,60,0) 70%);pointer-events:none}
.hero__in{padding:52px 20px 44px;position:relative;z-index:1}
.body{position:relative;background:var(--sand)}
.hero__copy{max-width:820px}
.hero h1{font-size:40px;margin:0 0 12px}
.hero__lede{font-size:20px;color:var(--ink2);margin:0 0 22px;line-height:1.5}
.byl{display:flex;align-items:center;gap:12px;margin:14px 0}
.byl__pic{width:54px;height:54px;border-radius:50%;object-fit:cover;border:2px solid var(--gold)}
.byl__name a{color:var(--ink);font-weight:700;text-decoration:none}
.byl__role{font-size:13.5px;color:var(--ink2)}
.byl__meta{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13.5px;color:var(--ink2);margin-top:6px}
.byl__meta span{display:inline-flex;align-items:center;gap:6px}
.byl__meta span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--amber)}
.jumpdown{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-family:var(--disp);font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--rise);text-decoration:none;font-size:15px}
.jumpdown svg{width:12px;height:12px;fill:currentColor}

/* ---------- body ---------- */
.body{padding:22px 20px 40px;max-width:920px}
.body p{margin:0 0 16px}
.body h3{font-size:22px;margin:26px 0 8px}
.body h4{font-size:17px;margin:18px 0 6px;text-transform:uppercase;letter-spacing:.03em;color:var(--ink2)}
.body ul,.body ol{margin:0 0 16px;padding-left:22px}
.body li{margin:6px 0}
.lozenge{display:flex;align-items:center;gap:14px;font-size:27px;margin:44px 0 10px;padding-top:8px}
.lozenge--first{margin-top:26px}
.sundisc{width:46px;height:27px;flex:none}
.tl-lede{font-size:15px;color:var(--ink2);margin:0 0 16px;font-style:italic}
.disclosure-inline{background:#fff7e9;border:1px solid #f0d9a8;border-radius:10px;padding:12px 16px;font-size:14px;color:var(--ink2);margin:16px 0}

/* ---------- toplist / pick rows (horizontal on desktop) ---------- */
.toplist{list-style:none;margin:10px 0 26px;padding:0}
.toplist>li{margin:0 0 16px}
.stars{display:inline-flex;gap:2px}
.stars svg{width:16px;height:16px;fill:var(--gold)}
.stars svg.off{fill:#d9cdb4}
.pick{position:relative;display:flex;align-items:center;gap:26px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 28px 20px 40px;box-shadow:var(--shadow)}
.pick--top{box-shadow:0 6px 22px rgba(180,80,30,.16);border-color:#e7c9a6}
.pick__ribbon{position:absolute;top:-11px;left:24px;background:var(--rust);color:#fff;font-family:var(--disp);font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-size:11px;padding:4px 12px;border-radius:6px;white-space:nowrap}
.pick__rank{position:absolute;left:-16px;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;background:var(--rust);color:#fff;font-family:var(--disp);font-weight:700;font-size:16px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.22)}
.pick__logo{flex:none;width:158px;display:flex;flex-direction:column;align-items:center;gap:10px}
.pick__chip{width:158px;height:88px;background:#fff;border:1px solid var(--line);border-radius:12px;display:flex;align-items:center;justify-content:center;padding:12px}
.pick__chip--dark{background:#241b12}
.pick__chip img{max-height:62px;max-width:134px;width:auto;object-fit:contain}
.pick__body{flex:1;min-width:0;text-align:left}
.pick__name{font-size:23px;margin:0 0 6px;color:var(--ink)}
.pick__bonus{font-family:var(--disp);font-weight:600;font-size:19px;line-height:1.28;color:var(--rust)}
.pick__act{flex:none}
.claim2{display:inline-block;background:var(--rust);color:#fff;font-family:var(--disp);font-weight:600;font-size:17px;letter-spacing:.02em;padding:15px 34px;border-radius:8px;text-decoration:none;text-align:center;white-space:nowrap;box-shadow:0 2px 8px rgba(180,80,30,.25)}
.claim2:hover{background:var(--rust2);color:#fff}

/* ---------- in-depth reviews ---------- */
.rev{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:20px 22px;margin:18px 0;box-shadow:var(--shadow)}
.rev__top{display:grid;grid-template-columns:150px 1fr auto;gap:16px;align-items:center;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:14px}
.rev__chip{background:#fff;border:1px solid var(--line);border-radius:10px;height:60px;display:flex;align-items:center;justify-content:center;padding:6px}
.rev__chip--dark{background:#241b12}
.rev__chip img{max-height:48px;width:auto;object-fit:contain}
.rev__h h3{margin:0 0 6px;font-size:21px}
.rev__score{font-family:var(--disp);font-weight:700;font-size:34px;color:var(--rise);text-align:center;line-height:1;display:flex;flex-direction:column}
.rev__score small{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);font-family:var(--body);margin-top:3px}
.dims{list-style:none;margin:16px 0;padding:0;display:grid;gap:8px}
.dims li{display:grid;grid-template-columns:180px 1fr 34px;gap:10px;align-items:center;font-size:13.5px}
.dims .bar{background:#efe6d4;border-radius:6px;height:8px;overflow:hidden}
.dims .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--amber),var(--rise))}
.dims .num{font-weight:700;text-align:right}
.pc{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:16px 0}
.pc h4{margin:0 0 8px}
.pc ul{list-style:none;margin:0;padding:0}
.pc li{display:flex;gap:8px;align-items:flex-start;margin:7px 0;font-size:14.5px}
.pc svg{width:14px;height:14px;flex:none;margin-top:4px}
.pc .yes svg{fill:var(--grn)}.pc .no svg{fill:var(--rise)}
.claim--sm{margin-top:8px}

/* ---------- lists, tables, steps ---------- */
.steps{list-style:none;counter-reset:s;padding:0}
.steps li{counter-increment:s;position:relative;padding:4px 0 12px 44px;margin:0}
.steps li::before{content:counter(s);position:absolute;left:0;top:2px;width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--sun),var(--rise));color:#fff;font-family:var(--disp);font-weight:600;display:flex;align-items:center;justify-content:center}
.facts{list-style:none;padding:0}
.facts li{padding:10px 0;border-bottom:1px solid var(--line)}
.facts li b{color:var(--rise);font-family:var(--disp);letter-spacing:.02em}
.tbl-wrap{overflow-x:auto;margin:18px 0}
table{width:100%;border-collapse:collapse;background:var(--paper);border:1px solid var(--line);border-radius:12px;overflow:hidden;font-size:14.5px}
caption{caption-side:top;text-align:left;font-size:13px;color:var(--ink2);padding:0 0 8px}
th,td{padding:11px 13px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
thead th{background:#f3ead9;font-family:var(--disp);font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.03em}
tbody tr:last-child td{border-bottom:none}

/* ---------- faq ---------- */
.faq details{background:var(--paper);border:1px solid var(--line);border-radius:10px;margin:9px 0;padding:2px 16px}
.faq summary{font-family:var(--disp);font-weight:600;font-size:17px;cursor:pointer;padding:12px 0;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--rise);font-size:20px}
.faq details[open] summary::after{content:"–"}
.faq__a{padding:0 0 12px}
.faq__a p{margin:0 0 8px}

/* ---------- author box ---------- */
.abox{display:grid;grid-template-columns:120px 1fr;gap:20px;align-items:start;background:#fff7e9;border:1px solid #f0d9a8;border-radius:14px;padding:20px;margin:34px 0}
.abox img{width:120px;height:120px;border-radius:12px;object-fit:cover}
.abox h3{margin:0 0 8px}

/* ---------- footer ---------- */
.foot{background:#241b12;color:#d9cdb8;margin-top:40px}
.foot__in{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px;padding:34px 20px}
.foot__mark img{height:46px;margin-bottom:10px}
.brand--foot{margin-bottom:12px}
.brand--foot .brand__name{color:#fff}
.brand--foot .brand__sub{color:var(--gold)}
.foot__mark p{font-size:14px;color:#b7a98f;margin:0}
.foot h4{color:#fff;font-size:15px;margin:0 0 10px;text-transform:uppercase;letter-spacing:.04em}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin:7px 0}
.foot a{color:#d9cdb8;text-decoration:none}.foot a:hover{color:var(--gold)}
.foot__legal{border-top:1px solid #3a2e20;padding:20px;font-size:13px;color:#b7a98f}
.disclose{background:#2f2418;border-radius:10px;padding:12px 14px;margin-bottom:14px}
.disclose b{color:var(--gold)}
.rg-strip{display:flex;flex-wrap:wrap;gap:8px 20px;margin-bottom:12px;font-size:13px}
.rg-strip b{color:#fff}
.rg-strip a{color:var(--gold)}

@media(max-width:820px){
  .nav{display:none;position:absolute;left:0;right:0;top:70px;background:#fff;flex-direction:column;align-items:stretch;gap:0;padding:6px 16px 16px;border-bottom:1px solid var(--line);box-shadow:var(--shadow);z-index:40;max-height:82vh;overflow:auto}
  .nav--open{display:flex}
  .nav__group{width:100%}
  .nav__top{width:100%;justify-content:space-between;padding:13px 4px;border-bottom:1px solid var(--line);font-size:16px;color:var(--ink)}
  .caret{display:none}
  .nav__menu{position:static;display:block;border:none;box-shadow:none;border-radius:0;padding:2px 0 10px 14px;min-width:0}
  .nav__menu a{padding:8px 0;color:var(--ink2)}
  .claim--nav{margin-top:14px;justify-content:center}
  .mast__burger{display:block}
  .mast{position:relative}
  .brand__name{font-size:23px}.brand .sundisc{width:40px;height:23px}.brand__sub{font-size:10px;letter-spacing:.2em}
  .mast__in{min-height:70px}
  .hero__in{padding:34px 20px 30px}
  .hero h1{font-size:30px}.hero__lede{font-size:17px}
  .lozenge{font-size:22px}
  .rev__top{grid-template-columns:120px 1fr}.rev__score{grid-column:1/-1;flex-direction:row;gap:8px;align-items:baseline}
  .pc{grid-template-columns:1fr}.dims li{grid-template-columns:130px 1fr 34px}
  .foot__in{grid-template-columns:1fr}.abox{grid-template-columns:1fr}.abox img{width:100px;height:100px}
}

/* ---------- mobile above-the-fold: H1 + author + updated + H2 + table ---------- */
@media(max-width:640px){
  .hero__in{padding:16px 16px 12px}
  .hero h1{font-size:25px;margin:0 0 8px;line-height:1.15}
  .hero__lede{display:none}
  .byl{margin:6px 0;gap:10px}
  .byl__pic{width:42px;height:42px}
  .byl__role{font-size:12px}
  .byl__meta{margin-top:5px;gap:4px 12px;font-size:12.5px}
  .byl__meta span:not(:first-child){display:none}
  .jumpdown{display:none}
  .sunrule--hero{height:4px;box-shadow:none}
  .body{padding-top:10px}
  .lozenge{font-size:19px;margin:12px 0 6px;gap:10px}
  .lozenge--first{margin-top:6px}
  .lozenge .sundisc{width:36px;height:21px}
  .tl-lede{margin:0 0 10px;font-size:13.5px}
  /* affiliate table -> vertical centred cards on phones */
  .pick{flex-direction:column;text-align:center;gap:14px;padding:28px 18px 18px}
  .pick__ribbon{left:50%;transform:translateX(-50%)}
  .pick__rank{left:-12px;top:-12px;transform:none;width:38px;height:38px;font-size:17px}
  .pick__logo{width:auto}
  .pick__chip{width:190px;max-width:100%;height:100px;padding:14px}
  .pick__chip img{max-height:70px;max-width:158px}
  .pick__body{text-align:center;width:100%}
  .pick__name{font-size:21px}
  .pick__act{width:100%}
  .claim2{display:block;width:100%;padding:15px}
}