@charset "utf-8";
/* ============================================================================
   beverlyshoresindiana.org / shared stylesheet
   Visual language reproduced from the town site's 2024 identity:
   sunset gradient band, amber lozenge section headers, banded sun disc,
   thick sunset rules, script wordmark. Warm sand paper, espresso ink.

   MOTIF SYSTEM (all derived from the logo):
     .sunrule    banded gold->red stripe  (legacy's thick orange rule)
     .lozenge    amber pill heading       (legacy's shape_yellow lozenge)
     .sundisc    banded half-disc mark    (logo's sun, reused as ornament)
     .ripple     reflection dashes        (logo's water reflection)
   TOPLIST vocabulary is deliberately its own (.dunerow__*) / it must not
   share a skeleton or class vocabulary with any sibling property.
   ============================================================================ */

/* ---------- fonts (self-hosted, no CDN dependency) ---------- */
@font-face{font-family:'Open Sans';src:url('/assets-casino/fonts/opensans-var.woff2') format('woff2');
  font-weight:300 800;font-style:normal;font-display:swap;}
@font-face{font-family:'Oswald';src:url('/assets-casino/fonts/oswald-var.woff2') format('woff2');
  font-weight:300 700;font-style:normal;font-display:swap;}

/* ---------- tokens ---------- */
:root{
  --ink:#241a0e;            /* espresso / from the logo wordmark */
  --ink-2:#4a3826;
  --ink-3:#6d5943;
  --sun-gold:#f5c63c;
  --sun-amber:#f09c30;
  --sun-orange:#ef7f24;
  --sun-red:#e2451f;
  /* Same sunset red, darkened just enough for the bonus amount to clear
     WCAG AA for normal text on the card background (4.94:1, was 4.05:1).
     --sun-red stays as-is for the gradients and rules. */
  --bonus-ink:#cc3a17;
  --sand:#fbf4e8;           /* warm paper */
  --sand-2:#f4e7d2;
  --sand-3:#e8d6b8;
  --paper:#fffdf9;
  --poster-bg:#fef5d8;   /* the banner art's own cream, so it blends seamlessly */
  --line:#dcc7a4;

  /* RESERVED CTA COLOUR / Lake Michigan teal, the complement of the sunset
     accent. Appears on action buttons ONLY: never on a heading, rank, bonus,
     ribbon, link, border or icon. Do not reuse this token anywhere else. */
  --cta:#0e7c86;
  --cta-hover:#0a626a;
  --cta-ink:#ffffff;

  --sunset:linear-gradient(90deg,var(--sun-gold) 0%,var(--sun-amber) 34%,var(--sun-orange) 67%,var(--sun-red) 100%);
  --shadow:0 1px 0 rgba(36,26,14,.06),0 2px 8px rgba(36,26,14,.07);
  --wrap:1180px;
}

/* ---------- reset / base ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--paper);color:var(--ink);
  font:400 16.5px/1.68 'Open Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;}
img{max-width:100%;height:auto;display:block;}
a{color:#9a3b12;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;}
a:hover{color:var(--sun-red);}
h1,h2,h3,h4{font-family:'Oswald',Arial Narrow,sans-serif;font-weight:600;line-height:1.16;
  margin:0 0 .5em;letter-spacing:.01em;color:var(--ink);text-wrap:balance;}
h1{font-size:clamp(1.62rem,4.1vw,2.34rem);letter-spacing:.005em;}
h2{font-size:clamp(1.28rem,2.9vw,1.72rem);}
h3{font-size:clamp(1.08rem,2.2vw,1.24rem);}
p{margin:0 0 1.05em;}
ul,ol{margin:0 0 1.15em;padding-left:1.35em;}
li{margin-bottom:.42em;}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:20px;}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* =========================== MOTIF: sunset rule =========================== */
.sunrule{height:6px;border:0;margin:0;background:var(--sunset);}
.sunrule--thin{height:3px;}
.sunrule--sect{height:5px;margin:2.6rem 0 1.5rem;border-radius:3px;}

/* MOTIF: reflection ripple / the logo's water dashes, used as a soft texture */
.ripple{height:10px;margin:.35rem 0 0;
  background-image:repeating-linear-gradient(90deg,var(--sun-amber) 0 22px,transparent 22px 40px),
                   repeating-linear-gradient(90deg,var(--sun-orange) 0 12px,transparent 12px 34px);
  background-size:100% 2px,100% 2px;background-position:0 2px,0 6px;background-repeat:no-repeat;
  opacity:.5;}

/* =============================== MASTHEAD =============================== */
/* Non-sticky by rule. Sunset band under the bar reproduces the legacy nav. */
.mast{background:var(--poster-bg);border-bottom:0;position:static;}
.mast__in{display:flex;align-items:center;gap:18px;min-height:auto;padding-block:20px;}
.mast__logo{flex:0 0 auto;display:block;}
.mast__logo img{height:124px;width:auto;}
.mast__spacer{flex:1 1 auto;}
.nav{display:flex;align-items:center;gap:22px;}
.nav a{font-family:'Oswald',sans-serif;font-weight:500;font-size:.9rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-2);text-decoration:none;padding:6px 0;
  border-bottom:2px solid transparent;}
.nav a:hover{color:var(--ink);border-bottom-color:var(--sun-orange);}
/* the nav's Claim button must keep the CTA's white text: `.nav a` would
   otherwise win on specificity and render espresso text on teal. */
.nav a.claim,.nav a.claim:hover{color:var(--cta-ink);border-bottom-color:transparent;}
.mast__burger{display:none;background:var(--sand-2);border:1px solid var(--line);border-radius:6px;
  width:46px;height:40px;cursor:pointer;padding:0;align-items:center;justify-content:center;}
.mast__burger span{display:block;width:22px;height:2px;background:var(--ink);position:relative;}
.mast__burger span::before,.mast__burger span::after{content:"";position:absolute;left:0;width:22px;height:2px;background:var(--ink);}
.mast__burger span::before{top:-7px;} .mast__burger span::after{top:7px;}

/* ================================= HERO =================================
   Full-bleed gambling image bled into the copy: the photograph is the hero's
   own background, sitting to the RIGHT, and a left-to-right gradient carries
   it into the sand behind the text. No self-contained boxed image.
   ======================================================================== */
/* The banner is FLAT POSTER ART in the logo's own language (banded sun disc,
   dune-grass silhouette, flat chips and cards) rather than a photograph, which
   read as foreign against the rest of the site. Its cream matches --poster-bg,
   so the art blends into the masthead band with only a soft left fade. */
.hero{position:relative;background-color:var(--poster-bg);
  border-bottom:1px solid var(--line);
  background-image:url('/assets-casino/hero-poster-1800.jpg?v=3');
  background-repeat:no-repeat;background-position:right bottom;background-size:auto 100%;}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,
    var(--poster-bg) 0%, var(--poster-bg) 30%,
    rgba(254,245,216,.92) 42%, rgba(254,245,216,.55) 56%,
    rgba(254,245,216,.12) 72%, rgba(254,245,216,0) 88%);}
.hero__in{position:relative;z-index:1;padding-block:16px 14px;
  display:grid;grid-template-columns:minmax(0,60%) 1fr;gap:24px;align-items:center;}
.hero__copy{min-width:0;}
.hero h1{margin:0 0 .38em;font-size:clamp(1.72rem,4vw,2.62rem);line-height:1.1;
  letter-spacing:-.005em;font-weight:600;}
.hero__lede{margin:0;font-size:1.01rem;line-height:1.45;color:var(--ink-2);max-width:56ch;
  font-weight:600;}

/* byline / structured rows, never a compressed dot-run */
.byl{display:flex;align-items:center;gap:11px;margin:11px 0 0;}
.byl__pic{width:46px;height:46px;border-radius:50%;flex:0 0 auto;border:2px solid var(--sun-amber);}
.byl__who{font-size:.9rem;line-height:1.45;}
.byl__name{font-weight:700;color:var(--ink);}
.byl__name a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--sun-amber);}
.byl__role{color:var(--ink-3);}
.byl__meta{display:flex;flex-wrap:wrap;gap:4px 13px;margin:8px 0 0;font-size:.78rem;color:var(--ink-3);}
.byl__meta span{display:inline-flex;align-items:center;gap:5px;}

/* hero CTA / drives DOWN into the ranking, never past it */
.jumpdown{display:inline-flex;align-items:center;gap:9px;margin:12px 0 0;
  background:var(--cta);color:var(--cta-ink);text-decoration:none;
  font-family:'Oswald',sans-serif;font-weight:600;font-size:.96rem;letter-spacing:.05em;
  text-transform:uppercase;padding:11px 21px;border-radius:4px;
  box-shadow:0 2px 0 var(--cta-hover);}
.jumpdown:hover{background:var(--cta-hover);color:var(--cta-ink);box-shadow:0 1px 0 var(--cta-hover);transform:translateY(1px);}
.jumpdown svg{width:13px;height:13px;fill:currentColor;}

/* ====================== MOTIF: lozenge section heading ====================== */
/* The legacy site's amber pill. The H2 *is* the lozenge / nothing sits above it. */
.lozenge{position:relative;display:flex;align-items:center;gap:12px;
  background:linear-gradient(180deg,var(--sun-gold),var(--sun-amber));
  color:#5a2408;border-radius:26px;padding:9px 24px 9px 18px;margin:2.4rem 0 1rem;
  font-size:clamp(1.14rem,2.5vw,1.42rem);text-transform:uppercase;letter-spacing:.045em;
  box-shadow:0 2px 0 #c87d18,var(--shadow);}
.lozenge .sundisc{flex:0 0 auto;}
main > .wrap > .lozenge:first-child,.lozenge--first{margin-top:.95rem;}

/* banded sun disc ornament (inline svg gets these dims) */
.sundisc{width:26px;height:15px;display:block;}

/* ============================== TOPLIST ==============================
   .dunerow / a NARROW single-line row on desktop (~74px) so five clear the
   fold; two tiers on mobile. Own class vocabulary by design.
   ==================================================================== */
.toplist{list-style:none;margin:0 0 1.1rem;padding:0;counter-reset:none;max-width:none;}
.toplist > li{margin:0 0 8px;}

.dunerow{display:grid;align-items:center;gap:13px;
  /* fixed tag + CTA columns so the bonus panel aligns down the whole list */
  grid-template-columns:36px 108px minmax(150px,1.1fr) minmax(266px,1.15fr) 168px 140px;
  background:var(--paper);border:1px solid var(--line);border-left:0;border-radius:6px;
  padding:7px 13px 7px 0;box-shadow:var(--shadow);position:relative;overflow:hidden;
  min-height:72px;}
/* the sunset band on the leading edge / the repeating motif, per row */
.dunerow::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;
  background:var(--sunset);background-size:100% 400%;}
.dunerow--top::before{width:8px;}
.dunerow:hover{border-color:var(--sun-amber);}

.dunerow__rank{grid-column:1;margin-left:12px;text-align:center;
  font-family:'Oswald',sans-serif;font-weight:600;font-size:1.26rem;color:var(--ink);line-height:1;}
.dunerow__rank small{display:block;font-size:.5rem;letter-spacing:.13em;color:var(--ink-3);
  text-transform:uppercase;margin-top:1px;font-family:'Open Sans',sans-serif;font-weight:600;}

.dunerow__chip{grid-column:2;height:46px;border-radius:5px;display:flex;align-items:center;
  justify-content:center;padding:6px 8px;border:1px solid var(--line);background:#fff;}
.dunerow__chip--dark{background:var(--ink);border-color:var(--ink);}
.dunerow__chip img{max-height:100%;max-width:100%;width:auto;object-fit:contain;}

.dunerow__id{grid-column:3;min-width:0;}
.dunerow__name{font-family:'Oswald',sans-serif;font-weight:600;font-size:1.04rem;
  line-height:1.15;margin:0 0 2px;}
.dunerow__stars{display:flex;align-items:center;gap:6px;font-size:.76rem;color:var(--ink-3);
  white-space:nowrap;overflow:hidden;}
.dunerow__stars b{color:var(--ink);font-size:.81rem;}
.dunerow__stars .bestfor{overflow:hidden;text-overflow:ellipsis;}
.stars{display:inline-flex;gap:1px;}
.stars svg{width:12px;height:12px;fill:var(--sun-amber);}
.stars svg.off{fill:var(--sand-3);}

/* BONUS / THE eye-catcher. Sits on its own warm panel with a gold edge so the
   money number is the first thing read in the row, not a detail beside it. */
.dunerow__bonus{grid-column:4;min-width:0;align-self:stretch;
  display:flex;flex-direction:column;justify-content:center;
  background:linear-gradient(180deg,#fff8ea,#fdf0d9);
  border:1px solid var(--sand-3);border-left:4px solid var(--sun-amber);
  border-radius:5px;padding:5px 11px;}
.dunerow__bonus .lbl{display:block;font-size:.6rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#8a6a34;margin-bottom:1px;line-height:1.3;}
.dunerow__amt{font-family:'Oswald',sans-serif;font-weight:600;color:var(--bonus-ink);
  font-size:1.36rem;line-height:1.1;display:block;letter-spacing:-.005em;}
.dunerow__fine{display:flex;flex-wrap:wrap;gap:0 9px;margin-top:1px;
  font-size:.7rem;color:var(--ink-2);line-height:1.25;}
.dunerow__code{color:var(--ink);font-weight:600;}
.dunerow__code b{font-family:'Oswald',sans-serif;letter-spacing:.06em;color:var(--ink);}

.dunerow__tags{grid-column:5;display:flex;flex-wrap:wrap;gap:3px;align-content:center;}
.tag{font-size:.63rem;font-weight:600;letter-spacing:.045em;text-transform:uppercase;
  color:var(--ink-2);background:var(--sand-2);border:1px solid var(--sand-3);
  border-radius:3px;padding:2px 7px;white-space:nowrap;}

.dunerow__act{grid-column:6;}

/* ======================== CTA (reserved colour) ========================
   One button treatment across the whole site: teal face, darker teal
   "press" edge, uppercase Oswald. This colour appears nowhere else.
   ====================================================================== */
.claim{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  background:var(--cta);color:var(--cta-ink);text-decoration:none;
  font-family:'Oswald',sans-serif;font-weight:600;font-size:.9rem;letter-spacing:.06em;
  text-transform:uppercase;padding:11px 14px;border-radius:4px;
  box-shadow:0 2px 0 var(--cta-hover);transition:transform .08s,background .12s;}
.claim:hover{background:var(--cta-hover);color:var(--cta-ink);box-shadow:0 1px 0 var(--cta-hover);transform:translateY(1px);}
.claim svg{width:11px;height:11px;fill:currentColor;flex:0 0 auto;}
.claim--sm{font-size:.82rem;padding:9px 12px;}
.claim--nav{width:auto;padding:9px 16px;font-size:.82rem;}
.dunerow__act .claim{padding:12px 10px;}

/* ============================ REVIEW CARDS ============================ */
.rev{border:1px solid var(--line);border-radius:7px;background:var(--paper);
  box-shadow:var(--shadow);margin:0 0 1.5rem;overflow:hidden;}
.rev__top{display:flex;align-items:center;gap:16px;padding:16px 18px;background:var(--sand);
  border-bottom:1px solid var(--line);flex-wrap:wrap;}
.rev__chip{height:54px;min-width:118px;border-radius:5px;display:flex;align-items:center;
  justify-content:center;padding:8px 10px;border:1px solid var(--line);background:#fff;flex:0 0 auto;}
.rev__chip--dark{background:var(--ink);border-color:var(--ink);}
.rev__chip img{max-height:100%;max-width:100%;width:auto;object-fit:contain;}
.rev__h{flex:1 1 220px;min-width:0;}
.rev__h h3{margin:0 0 3px;}
.rev__score{font-family:'Oswald',sans-serif;font-weight:600;font-size:1.6rem;color:var(--ink);
  flex:0 0 auto;text-align:center;line-height:1;}
.rev__score small{display:block;font-family:'Open Sans',sans-serif;font-size:.56rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin-top:3px;}
.rev__body{padding:16px 18px;}
.dims{list-style:none;margin:0 0 1.1rem;padding:0;display:grid;gap:8px;}
.dims li{display:grid;grid-template-columns:168px 1fr 42px;align-items:center;gap:11px;font-size:.83rem;}
.dims .bar{height:7px;border-radius:4px;background:var(--sand-2);overflow:hidden;}
.dims .bar i{display:block;height:100%;background:var(--sunset);}
.dims .num{font-family:'Oswald',sans-serif;font-weight:600;text-align:right;}
.pc{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0 0 1.1rem;}
.pc ul{list-style:none;margin:0;padding:0;}
.pc li{display:flex;gap:8px;font-size:.87rem;margin-bottom:.45em;align-items:flex-start;}
.pc svg{width:13px;height:13px;flex:0 0 auto;margin-top:4px;}
.pc h4{font-family:'Oswald',sans-serif;font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 .55em;}
.pc .yes svg{fill:#3d7a2e;} .pc .no svg{fill:#a8391b;}

/* ============================== TABLES ============================== */
.tbl-wrap{overflow-x:auto;margin:0 0 1.3rem;border:1px solid var(--line);border-radius:6px;}
table{border-collapse:collapse;width:100%;font-size:.87rem;background:var(--paper);}
caption{text-align:left;font-size:.8rem;color:var(--ink-3);padding:9px 12px;}
th,td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;}
thead th{background:var(--sand);font-family:'Oswald',sans-serif;font-weight:600;font-size:.79rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap;}
tbody tr:last-child td{border-bottom:0;}
tbody tr:nth-child(even){background:#fffaf1;}

/* ============================== PANELS ============================== */
.panel{background:var(--sand);border:1px solid var(--line);border-left:4px solid var(--sun-amber);
  border-radius:6px;padding:16px 18px;margin:0 0 1.35rem;}
.panel h3{margin-top:0;}
.panel--flag{border-left-color:var(--sun-red);background:#fdf1e9;}
.facts{list-style:none;margin:0;padding:0;display:grid;gap:9px;
  grid-template-columns:repeat(auto-fit,minmax(216px,1fr));}
.facts li{background:var(--paper);border:1px solid var(--line);border-radius:5px;padding:11px 13px;}
.facts b{display:block;font-family:'Oswald',sans-serif;font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:3px;}

.steps{counter-reset:s;list-style:none;padding:0;}
.steps > li{counter-increment:s;position:relative;padding-left:44px;margin-bottom:1.05em;}
.steps > li::before{content:counter(s);position:absolute;left:0;top:-1px;width:30px;height:30px;
  border-radius:50%;background:var(--sunset);color:#4a1c05;font-family:'Oswald',sans-serif;
  font-weight:600;display:flex;align-items:center;justify-content:center;font-size:.95rem;}

/* ================================ FAQ ================================ */
.faq{border-top:1px solid var(--line);}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{cursor:pointer;padding:14px 34px 14px 0;position:relative;list-style:none;
  font-family:'Oswald',sans-serif;font-weight:500;font-size:1.02rem;color:var(--ink);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--sun-orange);border-bottom:2px solid var(--sun-orange);
  transform:translateY(-70%) rotate(45deg);transition:transform .16s;}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg);}
.faq__a{padding:0 0 15px;}
.faq__a p:last-child{margin-bottom:0;}

/* ============================= AUTHOR BOX ============================= */
.abox{display:flex;gap:18px;background:var(--sand);border:1px solid var(--line);
  border-radius:7px;padding:18px;margin:2rem 0 0;align-items:flex-start;}
.abox img{width:88px;height:88px;border-radius:50%;flex:0 0 auto;border:3px solid var(--sun-amber);}
.abox h3{margin:0 0 .3em;}
.abox p{margin:0 0 .55em;font-size:.9rem;}
.abox p:last-child{margin-bottom:0;}

/* ================================ FOOTER ================================ */
.foot{background:var(--ink);color:#e9dcc8;margin-top:2.6rem;font-size:.88rem;}
.foot__in{padding-block:30px 22px;display:grid;gap:26px;grid-template-columns:1.5fr 1fr 1fr;}
.foot h4{font-family:'Oswald',sans-serif;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sun-gold);margin:0 0 .8em;}
.foot a{color:#e9dcc8;text-decoration:none;}
.foot a:hover{color:var(--sun-gold);text-decoration:underline;}
.foot ul{list-style:none;margin:0;padding:0;}
.foot li{margin-bottom:.5em;}
.foot__mark{max-width:230px;}
.foot__mark img{height:60px;width:auto;margin-bottom:10px;filter:brightness(0) invert(1) opacity(.92);}
.foot__legal{border-top:1px solid #3d2c1a;padding-block:16px 26px;font-size:.79rem;color:#b7a58e;}
.foot__legal p{margin:0 0 .6em;}
.foot__legal p:last-child{margin-bottom:0;}
/* the #ad / affiliate disclosure lives HERE, at the very bottom / never above a heading */
.disclose{background:#1b120a;border:1px solid #3d2c1a;border-radius:5px;padding:12px 14px;
  margin:0 0 14px;color:#c9b79f;font-size:.79rem;}
.rg-strip{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;font-size:.79rem;color:#c9b79f;}
.rg-strip b{color:var(--sun-gold);font-family:'Oswald',sans-serif;letter-spacing:.05em;}

/* ============================== ARTICLE ============================== */
/* NOTE: do NOT set max-width on .body / it also carries .wrap, and overriding
   .wrap's max-width made the article and toplist run wider than the masthead. */
/* prose gets a comfortable measure; the toplist and step list must NOT be clamped */
.body > p,.body > ul:not(.toplist):not(.facts),.body > ol:not(.toplist):not(.steps),
.body > h3,.body > h4{max-width:78ch;}
.updated{font-size:.8rem;color:var(--ink-3);}


/* short lede directly under the ranking lozenge */
.tl-lede{font-size:.94rem;color:var(--ink-2);margin:0 0 .55rem;max-width:82ch;}
@media (max-width:720px){.tl-lede{font-size:.86rem;margin-bottom:.5rem;line-height:1.45;}}

/* =============================== MOBILE =============================== */
@media (max-width:900px){
  .hero__in{grid-template-columns:1fr;gap:12px;padding-block:20px 18px;}
  .hero{background-image:url('/assets-casino/hero-poster-1100.jpg?v=3');
    background-position:right bottom;background-size:auto 66%;}
  .hero::after{background:linear-gradient(180deg,
    rgba(254,245,216,.96) 0%, rgba(254,245,216,.9) 62%,
    rgba(254,245,216,.55) 86%, rgba(254,245,216,.15) 100%);}
  .foot__in{grid-template-columns:1fr 1fr;}
  .dunerow{grid-template-columns:32px 100px minmax(130px,1fr) minmax(230px,1.1fr) 136px;}
  .dunerow__tags{grid-column:4;grid-row:2;padding-left:0;margin-top:4px;}
  .dunerow__act{grid-column:5;grid-row:1/span 2;}
  .dims li{grid-template-columns:132px 1fr 40px;}
}

@media (max-width:720px){
  .nav{display:none;}
  .nav--open{display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:absolute;left:0;right:0;top:100%;background:var(--sand);z-index:40;
    border-bottom:3px solid var(--sun-orange);box-shadow:0 10px 22px rgba(36,26,14,.16);padding:8px 20px 16px;}
  .nav--open a{padding:12px 0;border-bottom:1px solid var(--line);border-left:0;}
  .nav--open a:last-of-type{border-bottom:0;}
  .nav--open .claim{margin-top:10px;width:100%;}
  .mast{position:relative;}
  .mast__burger{display:flex;}
  .mast__in{min-height:auto;padding-block:14px;}
  .mast__logo img{height:84px;}

  /* on one column the art becomes a bottom-right corner accent, kept clear of
     the copy block rather than washed behind it */
  .hero{background-image:url('/assets-casino/hero-poster-700.jpg?v=3');
    background-position:right -6px bottom -4px;background-size:auto 44%;}
  .hero::after{background:linear-gradient(180deg,
    rgba(254,245,216,.99) 0%, rgba(254,245,216,.97) 70%,
    rgba(254,245,216,.55) 88%, rgba(254,245,216,.05) 100%);}
  .hero h1{font-size:1.58rem;line-height:1.13;}
  .hero__lede{font-size:.93rem;line-height:1.42;}
  .hero__in{gap:7px;padding-block:12px 11px;}
  /* the ranking sits immediately below on mobile, so the hero's jump button is
     redundant chrome. The hamburger still carries a 'See top 15' CTA. */
  .jumpdown{display:none;}
  .byl{margin-top:7px;gap:9px;}
  .byl__pic{width:38px;height:38px;}
  .byl__who{font-size:.85rem;line-height:1.38;}
  .byl__meta{margin-top:4px;font-size:.7rem;gap:1px 9px;line-height:1.4;}
  .jumpdown{margin-top:8px;padding:8px 15px;font-size:.83rem;}

  /* --- mobile toplist row.
         The card gets SYMMETRIC inner padding (padding-inline on the box, not a
         left margin on the rank) so nothing hugs the left edge, and every tier
         starts on the same left rail. --- */
  .dunerow{grid-template-columns:34px minmax(0,1fr) auto;
    gap:6px 11px;padding:9px 13px 10px 13px;min-height:0;text-align:left;}
  .dunerow__rank{grid-column:1;grid-row:1;margin-left:0;font-size:1.24rem;align-self:center;}
  .dunerow__id{grid-column:2;grid-row:1;padding-left:0;align-self:center;min-width:0;}
  .dunerow__chip{grid-column:3;grid-row:1;height:38px;min-width:96px;justify-self:end;padding:5px 7px;}
  .dunerow__name{font-size:1.02rem;margin-bottom:2px;}
  .dunerow__stars{font-size:.73rem;gap:5px;}
  /* bonus panel on tier 2 (full width, big number), pills tier 3, CTA last */
  .dunerow{row-gap:6px;}
  .dunerow__bonus{grid-column:1/-1;grid-row:2;align-self:auto;
    padding:7px 12px;margin:0;border-left-width:4px;}
  .dunerow__amt{font-size:1.34rem;}
  .dunerow__fine{font-size:.72rem;gap:0 9px;margin-top:1px;}
  .dunerow__tags{display:flex;grid-column:1/-1;grid-row:3;flex-direction:row;flex-wrap:wrap;
    gap:5px;padding-left:0;margin:0;}
  .dunerow__tags .tag{font-size:.64rem;padding:2px 7px;}
  .dunerow__act{grid-column:1/-1;grid-row:4;padding-left:0;padding-right:0;margin-top:0;}
  .dunerow__act .claim{padding:10px;font-size:.88rem;}

  .lozenge{padding:8px 15px 8px 13px;border-radius:22px;margin:.9rem 0 .55rem;
    font-size:1.08rem;letter-spacing:.03em;}
  .lozenge--first{margin-top:.7rem;}
  .pc{grid-template-columns:1fr;gap:10px;}
  .dims li{grid-template-columns:1fr;gap:3px;}
  .dims .num{text-align:left;}
  .rev__top{gap:12px;padding:14px;}
  .rev__score{margin-left:auto;}
  .abox{flex-direction:column;align-items:center;text-align:center;}
  .foot__in{grid-template-columns:1fr;gap:20px;}
  .foot__mark{max-width:none;}
  .byl__meta{font-size:.76rem;gap:5px 12px;}
}

@media (max-width:380px){
  .dunerow__chip{min-width:88px;height:34px;}
  .dunerow__rank{font-size:1.16rem;}
  .hero h1{font-size:1.24rem;}
  .hero__lede{font-size:.87rem;}
  /* On the smallest screens the ranking already sits at the fold, so the
     jump-to-ranking button is redundant chrome. Removing it here buys the
     first card's CTA the space it needs. Nav still reaches the ranking. */
  .jumpdown{display:none;}
  .byl__meta{font-size:.68rem;}
  .dunerow__amt{font-size:1.26rem;}
  .dunerow__bonus{padding:6px 10px;}
  .dunerow__tags .tag{font-size:.61rem;padding:1px 6px;}
  .dunerow__act .claim{padding:9px;font-size:.85rem;}
  .dunerow{row-gap:5px;padding-block:8px 9px;}
  .hero__lede{font-size:.88rem;}
  .hero__in{gap:6px;padding-block:10px 9px;}
  .mast__in{padding-block:12px;}
  .mast__logo img{height:76px;}
  .dunerow{padding-inline:12px;}
  .tl-lede{margin-bottom:.35rem;}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;}
}

@media print{
  .mast,.foot,.claim,.jumpdown{display:none;}
  body{background:#fff;}
}