/* =========================================================
   Mississippi Stud - guide & article page templates
   Loaded after site.css; reuses its tokens.
   ========================================================= */

/* ---------- breadcrumb ---------- */
.crumbs{
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--navy-soft);
  padding-top:14px;
}
.crumbs a{ color:var(--navy-soft); text-decoration:none; }
.crumbs a:hover{ color:var(--crimson); }
/* --hair is a rule colour, not a text colour: it was 1.47:1 on paper. The
   separators can stay quiet, but the current page name is content. */
.crumbs span{ color:#736A55; }
.crumbs span[aria-current="page"]{ color:var(--navy-soft); }

/* ---------- page head ---------- */
.page-head{ padding:0 0 clamp(18px,2.6vw,30px); position:relative; overflow:hidden; }
.page-head .wrap{ display:grid; grid-template-columns:1fr; gap:clamp(20px,3vw,38px); align-items:center; }

.eyebrow-red{
  display:inline-block;
  font-family:var(--display); font-weight:600;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--crimson);
  margin:10px 0 6px;
}
.tag-chip{
  display:inline-block;
  font-family:var(--display); font-weight:600;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:#FBF6EC; background:var(--crimson);
  padding:4px 11px; border-radius:3px;
  margin:12px 0 10px;
}
.page-head h1{
  font-family:var(--display); font-weight:700;
  font-size:clamp(32px,5.4vw,54px);
  line-height:1.02; letter-spacing:-.005em;
  text-transform:uppercase; color:var(--navy);
  margin-bottom:12px;
}
.page-lede{
  font-size:clamp(15px,1.5vw,18px);
  color:var(--navy-2);
  max-width:44ch; margin-bottom:16px;
}

.meta-row{
  display:flex; gap:0; flex-wrap:wrap; align-items:center;
  font-family:var(--display); font-weight:500;
  font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--navy-soft);
}
.meta-row li{ display:flex; align-items:center; gap:7px; padding:4px 14px 4px 0; }
.meta-row li + li{ border-left:1px solid var(--hair); padding-left:14px; }
.meta-row svg{ width:16px; height:16px; color:var(--navy); flex:none; }

.byline{ display:flex; align-items:center; gap:11px; margin-top:16px; }
.avatar{
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; flex:none;
  background:linear-gradient(150deg,var(--felt-top),var(--felt-low));
  color:#E4EDF8;
  font-family:var(--display); font-weight:600; font-size:16px;
  letter-spacing:.02em;
  border:2px solid var(--paper-2);
  box-shadow:var(--shadow-sm);
}
.byline b{
  display:block;
  font-family:var(--display); font-weight:600;
  font-size:13.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--navy);
}
.byline span{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--navy-soft); }

/* head artwork */
.head-art{ position:relative; min-height:clamp(190px,22vw,270px); }
.head-art .hero-cards .pc{ position:absolute; box-shadow:var(--shadow-lg); }
.head-art .a1{ left:2%;  top:2%;  transform:rotate(-8deg); z-index:3; }
.head-art .a2{ left:20%; top:0;   transform:rotate(5deg);  z-index:2; }
.head-art .b1{ left:0;   top:46%; transform:rotate(-4deg); }
.head-art .b2{ left:20%; top:45%; transform:rotate(1deg); }
.head-art .b3{ left:40%; top:46%; transform:rotate(6deg); }
.head-art .hero-chips{ position:absolute; right:2%; top:6%; display:flex; align-items:flex-end; gap:9px; }
.head-river{
  position:absolute; right:-4%; top:-12%;
  width:min(46%,420px); color:#9DB8D8; opacity:.5; pointer-events:none;
}

/* photo-style banner (article hero) */
.head-photo{
  position:relative;
  border-radius:10px; overflow:hidden;
  min-height:clamp(210px,26vw,320px);
  background:
    radial-gradient(120% 90% at 70% 20%, #2B5A8C 0%, #17365F 45%, #0A1E3A 100%);
  display:grid; place-items:center;
  box-shadow:var(--shadow-md);
}
.head-photo .boat-art{ width:74%; color:#8FB0D6; opacity:.5; }
.head-photo .plate{
  position:absolute; bottom:9%; left:50%; transform:translateX(-50%);
  font-family:var(--display); font-weight:600;
  font-size:clamp(12px,1.5vw,17px); letter-spacing:.22em; text-transform:uppercase;
  color:rgba(216,182,120,.85);
  white-space:nowrap;
}
.photo-note{
  font-size:11.5px; color:var(--navy-soft);
  padding:8px 2px 0; font-style:italic;
}

/* ---------- big CTA button ---------- */
.cta-wide{
  display:flex; align-items:center; justify-content:center;
  width:100%;
  font-family:var(--display); font-weight:600;
  font-size:clamp(16px,1.9vw,23px);
  letter-spacing:.08em; text-transform:uppercase;
  color:#FBF6EC; background:var(--crimson);
  border:none; border-radius:7px;
  padding:16px 24px; min-height:56px;
  text-decoration:none;
  box-shadow:0 5px 16px rgba(155,27,38,.3);
  transition:background .18s var(--ease), transform .18s var(--ease);
}
.cta-wide:hover{ background:var(--crimson-2); transform:translateY(-2px); }

/* ---------- sticky section tabs ---------- */
.gtabs{
  position:sticky; top:66px; z-index:40;
  background:var(--paper-2);
  border:1px solid var(--hair);
  border-radius:8px;
  margin:clamp(16px,2.4vw,26px) 0;
  overflow-x:auto;
  scrollbar-width:none;
}
.gtabs::-webkit-scrollbar{ display:none; }
.gtabs ul{ display:flex; min-width:max-content; }
.gtabs a{
  display:block;
  font-family:var(--display); font-weight:600;
  font-size:12.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--navy-soft); text-decoration:none;
  padding:14px clamp(14px,2.4vw,30px);
  border-bottom:3px solid transparent;
  white-space:nowrap;
  transition:color .18s var(--ease), border-color .18s var(--ease);
}
.gtabs a:hover{ color:var(--navy); }
.gtabs a.active{ color:var(--crimson); border-bottom-color:var(--crimson); }

/* ---------- generic guide section ---------- */
.gsec{ padding:clamp(20px,3vw,36px) 0; }
.gsec > .wrap > .section-title{ margin-bottom:0; }
.ghead{
  font-family:var(--display); font-weight:700;
  font-size:clamp(17px,2vw,24px);
  letter-spacing:.03em; text-transform:uppercase;
  color:var(--navy);
}
.ghead.centred{ text-align:center; }

/* ---------- "at a glance" cards ---------- */
.glance{ display:grid; grid-template-columns:1fr; gap:10px; }
.glance li{
  display:flex; align-items:flex-start; gap:14px;
  background:var(--paper-2);
  border:1px solid var(--hair);
  border-radius:8px;
  padding:14px 16px;
}
.glance .ic{ flex:none; display:grid; place-items:center; width:52px; }
.glance .ic svg{ width:34px; height:34px; color:var(--navy); }
.glance h3{
  font-family:var(--display); font-weight:600;
  font-size:14.5px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--navy); margin-bottom:2px;
}
.glance p{ font-size:13px; color:var(--navy-soft); }
.mini-cards{ display:flex; gap:3px; }
.mini-cards i{
  width:15px; height:21px; border-radius:2px;
  background:
    repeating-linear-gradient(45deg, rgba(255,248,236,.3) 0 1px, transparent 1px 4px),
    linear-gradient(160deg,#25497A,#12305A);
  border:1px solid var(--paper-2);
  display:block;
}
.mini-cards i.face{
  background:#FFFDF7;
  border:1px solid var(--navy-soft);
  box-shadow:0 1px 2px rgba(22,48,90,.18);
}

/* ---------- table setup diagram ---------- */
.diagram{
  position:relative;
  border-radius:44% / 50%;
  border:clamp(10px,1.6vw,20px) solid transparent;
  background:
    radial-gradient(118% 90% at 50% 6%, #1E4373 0%, #14335C 46%, #0C2444 100%) padding-box,
    linear-gradient(160deg,#C9A265 0%,#8A6234 14%,#5B3B1C 30%,#A8834B 46%,
                    #E0BE86 54%,#8A6234 68%,#4E3218 84%,#B08A50 100%) border-box;
  box-shadow:inset 0 0 90px rgba(3,10,22,.5), 0 14px 34px rgba(10,30,58,.3);
  padding:clamp(16px,3vw,30px) 5%;
  overflow:hidden;
}
.diagram .boat-l,.diagram .boat-r{
  position:absolute; top:50%; transform:translateY(-50%);
  width:min(22%,190px); color:#7FA0C8; opacity:.14; pointer-events:none;
}
.diagram .boat-l{ left:3%; }
.diagram .boat-r{ right:3%; transform:translateY(-50%) scaleX(-1); }

.diag-rows{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:clamp(10px,2vw,18px); }
.diag-label{
  font-family:var(--display); font-weight:600;
  font-size:clamp(9.5px,1vw,12.5px);
  letter-spacing:.09em; text-transform:uppercase;
  color:#EFE6D4; text-align:center;
  text-shadow:0 1px 3px rgba(0,0,0,.5);
}
.diag-cards{ display:flex; gap:clamp(8px,1.6vw,20px); }
.diag-card{
  width:clamp(46px,6.4vw,74px); aspect-ratio:5/7;
  border-radius:6px;
  background:
    repeating-linear-gradient(45deg,  rgba(255,248,236,.26) 0 1.4px, transparent 1.4px 7px),
    repeating-linear-gradient(-45deg, rgba(255,248,236,.26) 0 1.4px, transparent 1.4px 7px),
    linear-gradient(160deg,#25497A,#12305A);
  border:2px solid var(--card-face);
  display:grid; place-items:center;
}
.diag-card svg{ width:56%; height:56%; color:#DCE7F5; opacity:.85; }
.diag-slot{
  width:clamp(46px,6.4vw,74px); aspect-ratio:5/7;
  border-radius:6px;
  border:2px dashed rgba(239,230,212,.6);
}
.diag-circle{
  width:clamp(56px,7.4vw,86px); aspect-ratio:1/1; border-radius:50%;
  border:2px dashed rgba(239,230,212,.6);
  display:grid; place-items:center;
  font-family:var(--display); font-weight:600;
  font-size:clamp(9px,.9vw,11.5px); letter-spacing:.08em; text-transform:uppercase;
  color:#EFE6D4; text-align:center;
}
.diag-chip{
  width:clamp(54px,7vw,82px); aspect-ratio:1/1; border-radius:50%;
  display:grid; place-items:center;
  /* light body with narrow navy edge spots, so the disc still reads as a
     chip against the navy felt rather than as a cog */
  --body:#F2F0EA; --spot:#1C3C68; --face:#FBFAF7;
  background:
    radial-gradient(circle closest-side, var(--face) 0 66%, transparent 66.5%),
    radial-gradient(circle closest-side, transparent 0 67%, rgba(28,60,104,.35) 67% 70%, transparent 70.5%),
    repeating-conic-gradient(from 11deg, var(--spot) 0 15deg, var(--body) 0 45deg);
  box-shadow:inset 0 0 0 2px rgba(28,60,104,.45), 0 3px 9px rgba(0,0,0,.4);
  font-family:var(--display); font-weight:700;
  font-size:clamp(13px,1.5vw,19px); color:var(--navy);
}
.diag-row{ display:flex; align-items:center; justify-content:center; gap:clamp(10px,2.4vw,30px); flex-wrap:wrap; }

.pin{
  width:22px; height:22px; border-radius:50%;
  background:var(--crimson); color:#FBF6EC;
  display:inline-grid; place-items:center;
  font-family:var(--display); font-weight:600; font-size:12px;
  flex:none;
  box-shadow:0 2px 6px rgba(0,0,0,.35);
}
.pin-label{ display:inline-flex; align-items:center; gap:7px; }
.pin-label span{
  font-family:var(--display); font-weight:600;
  font-size:clamp(9.5px,1vw,12.5px); letter-spacing:.08em; text-transform:uppercase;
  color:#EFE6D4;
}

.legend{
  margin-top:14px;
  background:var(--paper-2);
  border:1px solid var(--hair);
  border-radius:8px;
  padding:12px 16px;
}
.legend li{
  display:grid; grid-template-columns:22px auto 1fr; gap:10px;
  align-items:start;
  padding:6px 0; font-size:13px;
}
.legend b{
  font-family:var(--display); font-weight:600;
  font-size:13px; letter-spacing:.03em;
  color:var(--navy); white-space:nowrap;
}
.legend .dash{ color:var(--hair); }
.legend p{ color:var(--navy-soft); }

/* ---------- numbered step rows ---------- */
.steps-rows{ display:flex; flex-direction:column; gap:10px; }
.step-row{
  display:grid; grid-template-columns:auto 1fr; gap:14px;
  align-items:center;
  background:var(--paper-2);
  border:1px solid var(--hair);
  border-radius:8px;
  padding:14px 16px;
}
.step-row .n{
  font-family:var(--display); font-weight:700;
  font-size:clamp(24px,3vw,34px);
  color:var(--crimson); line-height:1;
}
.step-row h3{
  font-family:var(--display); font-weight:600;
  font-size:14px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--navy); margin-bottom:3px;
}
.step-row p{ font-size:13px; color:var(--navy-soft); }
.step-art{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.step-art .pc{ width:clamp(38px,4.4vw,52px); }
.step-art .pc .pip{ display:none; }

.bet-chip{
  width:clamp(40px,4.6vw,54px); aspect-ratio:1/1; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--display); font-weight:600;
  font-size:clamp(11px,1.2vw,14px); color:#F6F1E8;
  --body:#17191C; --spot:#E7DDC4; --face:#17191C;
  background:
    radial-gradient(circle closest-side, var(--face) 0 69%, transparent 69.5%),
    repeating-conic-gradient(var(--spot) 0 22.5deg, var(--body) 0 45deg);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.25), 0 3px 8px rgba(4,12,26,.35);
}
.bet-chip.red{ --body:#9D2925; --spot:#FFFFFF; --face:#9D2925; }
.bet-chip.navy{ --body:#1C3C68; --spot:#FFFFFF; --face:#1C3C68; }
.ante-chip{
  width:clamp(56px,6vw,72px); aspect-ratio:1/1; border-radius:50%;
  display:grid; place-items:center;
  --body:#1C3C68; --spot:#FFFFFF; --face:#FBFAF7;
  background:
    radial-gradient(circle closest-side, var(--face) 0 69%, transparent 69.5%),
    repeating-conic-gradient(var(--spot) 0 22.5deg, var(--body) 0 45deg);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.2), 0 3px 9px rgba(4,12,26,.35);
  font-family:var(--display); font-weight:600;
  font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--navy);
}

/* ---------- betting-round rows ---------- */
.rounds{ display:flex; flex-direction:column; gap:9px; }
.round{
  display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:center;
  background:var(--paper-2);
  border:1px solid var(--hair);
  border-radius:8px;
  padding:12px 14px;
}
.round .sq{
  width:34px; height:34px; border-radius:5px;
  background:var(--crimson); color:#FBF6EC;
  display:grid; place-items:center;
  font-family:var(--display); font-weight:700; font-size:19px;
  flex:none;
}
.round h3{
  font-family:var(--display); font-weight:600;
  font-size:13.5px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--navy);
}
.round p{ font-size:12.5px; color:var(--navy-soft); }
.round-art{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.round-art .pc{ width:clamp(34px,3.8vw,46px); }
.round-art .pc .pip{ display:none; }
.round-art .down{
  width:clamp(34px,3.8vw,46px); aspect-ratio:5/7; border-radius:5px;
  background:
    repeating-linear-gradient(45deg, rgba(255,248,236,.24) 0 1.2px, transparent 1.2px 6px),
    linear-gradient(160deg,#25497A,#12305A);
  border:2px solid var(--card-face);
}
.round-art .fold-word{
  font-family:var(--display); font-weight:600;
  font-size:13px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--navy);
}

.notice{
  display:flex; align-items:center; gap:11px; justify-content:center;
  background:var(--crimson); color:#F7EFE2;
  border-radius:7px;
  padding:13px 18px;
  font-size:14px; text-align:center;
  margin-top:14px;
}
.notice svg{ width:20px; height:20px; flex:none; color:#F0D08A; }

/* ---------- payout pair ---------- */
.pay-pair{ display:grid; grid-template-columns:1fr; gap:14px; }
.pay-card{
  background:var(--paper-2);
  border:1px solid var(--hair);
  border-radius:8px;
  padding:14px 16px 16px;
}
.pay-card h3{
  font-family:var(--display); font-weight:700;
  font-size:14px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--navy); text-align:center;
  padding-bottom:10px; margin-bottom:4px;
  border-bottom:1px solid var(--hair);
}
.pay-card li{
  display:flex; justify-content:space-between; gap:12px;
  padding:6px 2px; font-size:13.5px;
  border-bottom:1px solid rgba(217,205,180,.5);
}
.pay-card li:last-child{ border-bottom:none; }
.pay-card li b{ color:var(--crimson); font-weight:700; white-space:nowrap; }
.pay-card li span{ color:var(--navy-2); }
.pay-card .foot{ font-size:11.5px; color:var(--navy-soft); text-align:center; margin-top:8px; }

.pay-card.dark{
  background:var(--crimson);
  border-color:var(--crimson-2);
  color:#F7EFE2;
  position:relative; overflow:hidden;
}
.pay-card.dark h3{ color:#F7EFE2; border-bottom-color:rgba(255,255,255,.25); }
.pay-card.dark li{ border-bottom-color:rgba(255,255,255,.16); }
.pay-card.dark li span{ color:#F3E4DA; }
.pay-card.dark li b{ color:#FBF6EC; }
.pay-card.dark .intro{ font-size:12.5px; color:#F0D9CF; text-align:center; margin-bottom:10px; }
.pay-card.dark .boat-bg{
  position:absolute; right:-6%; bottom:-14%;
  width:52%; color:#fff; opacity:.09; pointer-events:none;
}

/* ---------- carousel ---------- */
.rail-wrap{ position:relative; }
.rail{
  display:flex; gap:12px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding-bottom:6px;
  scrollbar-width:thin;
}
.rail > *{ scroll-snap-align:start; flex:0 0 auto; }
.rail-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border-radius:50%;
  background:var(--paper-2); border:1px solid var(--hair);
  color:var(--navy);
  display:none; place-items:center;
  box-shadow:var(--shadow-sm);
  z-index:3;
}
.rail-btn svg{ width:17px; height:17px; }
.rail-btn.prev{ left:-8px; }
.rail-btn.next{ right:-8px; }
.rail-btn:hover{ background:var(--paper-3); }

.hand-card{
  width:clamp(150px,20vw,190px);
  background:var(--paper-2);
  border:1px solid var(--hair);
  border-radius:8px;
  padding:12px;
  text-align:center;
}
.hand-card .cap{ display:flex; align-items:center; gap:7px; justify-content:center; margin-bottom:10px; }
.hand-card .cap b{
  font-family:var(--display); font-weight:600;
  font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--navy);
}
.hand-card .body{ display:flex; align-items:center; justify-content:center; gap:5px; min-height:78px; flex-wrap:wrap; }
.hand-card .pc{ width:clamp(34px,3.8vw,44px); }
.hand-card .pc .pip{ display:none; }
.hand-card .win{
  font-family:var(--display); font-weight:600;
  font-size:15px; letter-spacing:.04em; color:var(--crimson);
}
.dots{ display:flex; gap:6px; justify-content:center; margin-top:12px; }
.dots i{ width:7px; height:7px; border-radius:50%; background:var(--hair); display:block; }
.dots i.on{ background:var(--navy); }

/* ---------- navy CTA band ---------- */
.cta-band{
  position:relative;
  background:linear-gradient(180deg,var(--felt-top),var(--felt-low));
  border-radius:10px;
  padding:clamp(22px,3.4vw,40px) clamp(18px,3vw,34px);
  text-align:center;
  overflow:hidden;
  color:#E4EDF8;
}
.cta-band .boat-bg{
  position:absolute; top:50%; transform:translateY(-50%);
  width:min(24%,220px); color:#9FBBDD; opacity:.16; pointer-events:none;
}
.cta-band .boat-bg.l{ left:2%; }
.cta-band .boat-bg.r{ right:2%; transform:translateY(-50%) scaleX(-1); }
.cta-band h2{
  position:relative; z-index:2;
  font-family:var(--display); font-weight:700;
  font-size:clamp(20px,2.8vw,32px);
  letter-spacing:.03em; text-transform:uppercase;
  color:#F3EEE2; margin-bottom:6px;
}
.cta-band p{ position:relative; z-index:2; font-size:14px; color:#B7C9DE; margin-bottom:16px; }
.cta-band .btn{ position:relative; z-index:2; }
.cta-chips{
  position:absolute; right:5%; top:50%; transform:translateY(-50%);
  display:none; gap:8px; z-index:2;
}

/* ---------- related guides ---------- */
.rel-card{
  width:clamp(210px,26vw,270px);
  background:var(--paper-2);
  border:1px solid var(--hair);
  border-radius:8px;
  overflow:hidden;
  text-decoration:none; color:inherit;
  display:flex; flex-direction:column;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease);
}
.rel-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.rel-img{
  position:relative; aspect-ratio:16/10;
  display:grid; place-items:center;
  background:linear-gradient(150deg,var(--felt-top),var(--felt-low));
}
.rel-img svg{ width:58%; height:58%; color:#9FBBDD; fill:currentColor; opacity:.42; }
.rel-body{ padding:11px 13px 14px; }
.rel-body h3{
  font-family:var(--display); font-weight:600;
  font-size:15px; color:var(--navy); line-height:1.24; margin-bottom:4px;
}
.rel-body p{ font-size:12.5px; color:var(--navy-soft); }
.rel-meta{ display:flex; align-items:center; gap:6px; font-size:11px; color:var(--navy-soft); margin-top:6px; }
.rel-meta svg{ width:12px; height:12px; }

/* =========================================================
   ARTICLE-ONLY PIECES
   ========================================================= */

.share-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap;
  padding:14px 0;
  border-bottom:1px solid var(--hair);
}
.share-left{ display:flex; align-items:center; gap:10px; }
.share-left > span{
  font-family:var(--display); font-weight:600;
  font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--navy-soft);
}
.share-btn{
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--hair); background:var(--paper-2);
  color:var(--navy);
  display:grid; place-items:center;
  transition:background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.share-btn svg{ width:16px; height:16px; }
.share-btn:hover{ background:var(--navy); color:var(--paper); border-color:var(--navy); }
.save-btn{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--hair); background:var(--paper-2);
  border-radius:6px; padding:9px 16px; min-height:40px;
  font-family:var(--display); font-weight:600;
  font-size:12.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--navy);
}
.save-btn svg{ width:15px; height:15px; }
.save-btn:hover{ background:var(--paper-3); }
.save-btn[aria-pressed="true"]{ background:var(--navy); color:var(--paper); border-color:var(--navy); }

.summary-grid{ display:grid; grid-template-columns:1fr; gap:14px; padding:18px 0; }
.short-version{
  border:2px solid var(--crimson);
  border-radius:8px;
  padding:14px 16px;
  background:var(--paper-2);
}
.short-version h2{
  font-family:var(--display); font-weight:700;
  font-size:14px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--crimson); text-align:center; margin-bottom:10px;
}
.short-version p{ display:flex; gap:10px; font-size:14px; color:var(--navy-2); }
.short-version .sp{ color:var(--crimson); flex:none; }
.short-version .sp svg{ width:15px; height:15px; fill:currentColor; }

.toc{
  border:1px solid var(--hair);
  border-radius:8px;
  background:var(--paper-2);
  padding:14px 16px;
}
.toc summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-family:var(--display); font-weight:600;
  font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--navy);
}
.toc summary::-webkit-details-marker{ display:none; }
.toc summary::after{
  content:""; width:9px; height:9px; flex:none;
  border-right:2px solid var(--navy-soft); border-bottom:2px solid var(--navy-soft);
  transform:rotate(-135deg); transition:transform .2s var(--ease);
}
.toc[open] summary::after{ transform:rotate(45deg); }
.toc ol{
  display:grid; grid-template-columns:repeat(2,1fr); gap:5px 18px;
  margin-top:12px; padding-top:10px;
  border-top:1px solid var(--hair);
}
.toc a{ display:flex; gap:9px; font-size:13.5px; color:var(--navy-2); text-decoration:none; }
.toc a:hover{ color:var(--crimson); }
.toc .num{ font-family:var(--display); font-weight:600; color:var(--crimson); }

.prose h2{
  font-family:var(--display); font-weight:700;
  font-size:clamp(17px,2vw,23px);
  letter-spacing:.03em; text-transform:uppercase;
  color:var(--navy); margin:0 0 10px;
}
.prose p{ font-size:14.5px; color:var(--navy-soft); margin-bottom:11px; }
.prose .with-art{ display:grid; grid-template-columns:1fr; gap:16px; align-items:center; }
.prose-art{ position:relative; min-height:140px; display:grid; place-items:center; }
.prose-art .river{ position:absolute; inset:0; color:#9DB8D8; opacity:.55; }
.prose-art .fan{ position:relative; display:flex; }
.prose-art .fan .pc{ width:clamp(44px,5vw,58px); }
.prose-art .fan .pc:nth-child(1){ transform:rotate(-9deg); }
.prose-art .fan .pc:nth-child(2){ transform:rotate(0deg); margin-left:-10px; }
.prose-art .fan .pc:nth-child(3){ transform:rotate(9deg); margin-left:-10px; }
.prose-art .fan .pc .pip{ display:none; }

.pullquote{
  display:flex; gap:12px; align-items:flex-start;
  margin:16px 0 20px;
}
.pullquote .mark{
  font-family:Georgia, serif; font-size:44px; line-height:.8;
  color:var(--navy-soft); opacity:.45; flex:none;
}
.pullquote q{
  font-family:Georgia, "Times New Roman", serif;
  font-style:italic; font-weight:600;
  font-size:clamp(17px,2vw,23px);
  color:var(--crimson); line-height:1.32;
  quotes:none;
}

.golden-strip{
  position:relative;
  background:var(--crimson); color:#F7EFE2;
  border-radius:8px;
  padding:18px clamp(16px,2.6vw,28px);
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  flex-wrap:wrap;
  margin:18px 0 24px;
}
.golden-strip .kicker{
  font-family:var(--display); font-weight:600;
  font-size:12.5px; letter-spacing:.13em; text-transform:uppercase;
  color:rgba(247,239,226,.75); display:block; margin-bottom:4px;
}
.golden-strip q{
  font-family:Georgia, serif; font-style:italic; font-weight:600;
  font-size:clamp(19px,2.6vw,30px); line-height:1.18; quotes:none;
}
.golden-strip .pair{ display:flex; gap:5px; flex:none; }
.golden-strip .pc{ width:clamp(42px,5vw,58px); }
.golden-strip .pc .pip{ display:none; }

/* starting-hand table */
.sh-grid{ display:grid; grid-template-columns:1fr; gap:14px; }
.sh-rows{ display:flex; flex-direction:column; gap:8px; }
.sh-row{ display:grid; grid-template-columns:104px 1fr; gap:12px; align-items:center; }
.sh-tag{
  font-family:var(--display); font-weight:600;
  font-size:12.5px; letter-spacing:.06em; text-transform:uppercase;
  text-align:center; padding:8px 6px; border-radius:5px;
}
.sh-tag.r3{ background:#DCEBDF; color:#1B5E33; }
.sh-tag.r1{ background:#F6EBD2; color:#8A6A2E; }
.sh-tag.fold{ background:#F4DAD9; color:var(--crimson); }
.sh-row p{ font-size:13px; color:var(--navy-soft); }

.sh-examples{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.sh-ex{
  background:var(--paper-2);
  border:1px solid var(--hair);
  border-radius:8px;
  padding:10px;
  text-align:center;
}
.sh-ex .pair{ display:flex; justify-content:center; gap:4px; margin-bottom:9px; }
.sh-ex .pc{ width:clamp(32px,3.8vw,46px); }
.sh-ex .pc .pip{ display:none; }
.sh-ex .lab{
  display:block; border-radius:4px; padding:5px;
  font-family:var(--display); font-weight:600;
  font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
}

/* decision rows */
.dec{
  display:grid; grid-template-columns:auto 1fr; gap:14px;
  background:var(--paper-2);
  border:1px solid var(--hair);
  border-radius:8px;
  padding:14px 16px;
  margin-bottom:10px;
}
.dec .n{
  font-family:var(--display); font-weight:700;
  font-size:clamp(22px,2.8vw,30px); color:var(--crimson); line-height:1;
}
.dec h3{
  font-family:var(--display); font-weight:600;
  font-size:13.5px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--navy); margin-bottom:3px;
}
.dec p{ font-size:13px; color:var(--navy-soft); }
.dec-art{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.dec-art .pc{ width:clamp(32px,3.6vw,44px); }
.dec-art .pc .pip{ display:none; }
.dec-art .down{
  width:clamp(32px,3.6vw,44px); aspect-ratio:5/7; border-radius:5px;
  background:
    repeating-linear-gradient(45deg, rgba(255,248,236,.24) 0 1.2px, transparent 1.2px 6px),
    linear-gradient(160deg,#25497A,#12305A);
  border:2px solid var(--card-face);
}
.badges{ display:flex; flex-direction:column; gap:5px; }
.badge{
  font-family:var(--display); font-weight:600;
  font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  padding:5px 11px; border-radius:20px; text-align:center; white-space:nowrap;
}
.badge.navy{ background:var(--navy); color:#F3EEE2; }
.badge.r3{ background:#DCEBDF; color:#1B5E33; }
.badge.r1{ background:#F6EBD2; color:#8A6A2E; }
.badge.pay{ background:var(--crimson); color:#FBF6EC; }

.editor-note{
  display:flex; gap:10px; align-items:flex-start;
  background:#EAF0F7;
  border-radius:6px;
  padding:10px 13px;
  margin-top:10px;
  font-size:12.5px; color:var(--navy-2);
  grid-column:1 / -1;
}
.editor-note svg{ width:16px; height:16px; color:var(--navy); flex:none; margin-top:2px; }
.editor-note b{
  font-family:var(--display); font-weight:600;
  font-size:11.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--navy);
}

/* test-the-strategy panel */
.test-panel{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg,var(--felt-top),var(--felt-low));
  border:clamp(5px,.9vw,9px) solid transparent;
  background-clip:padding-box;
  border-radius:12px;
  padding:16px clamp(14px,2.4vw,26px) 18px;
  text-align:center;
  box-shadow:0 0 0 2px rgba(200,166,110,.55), var(--shadow-md);
}
.test-panel h2{
  font-family:var(--display); font-weight:700;
  font-size:clamp(15px,1.9vw,21px);
  letter-spacing:.08em; text-transform:uppercase;
  color:#F0E7D6; margin-bottom:13px;
  position:relative; z-index:2;
}
.test-panel .boat-bg{
  position:absolute; top:50%; transform:translateY(-50%);
  width:min(22%,190px); color:#9FBBDD; opacity:.16;
}
.test-panel .boat-bg.l{ left:1%; }
.test-panel .boat-bg.r{ right:1%; transform:translateY(-50%) scaleX(-1); }
.test-hand{ display:flex; justify-content:center; gap:8px; margin-bottom:14px; position:relative; z-index:2; flex-wrap:wrap; }
.test-hand .pc{ width:clamp(42px,5.4vw,66px); }
.test-hand .pc .pip{ display:none; }
.test-hand .down{
  width:clamp(42px,5.4vw,66px); aspect-ratio:5/7; border-radius:6px;
  background:
    repeating-linear-gradient(45deg, rgba(255,248,236,.26) 0 1.4px, transparent 1.4px 7px),
    linear-gradient(160deg,#25497A,#12305A);
  border:2px solid var(--card-face);
  display:grid; place-items:center;
}
.test-hand .down svg{ width:54%; height:54%; color:#DCE7F5; opacity:.85; }
.test-panel .cta-wide{ position:relative; z-index:2; max-width:520px; margin:0 auto; }

/* bankroll cards */
.bank-cards{ display:grid; grid-template-columns:1fr; gap:12px; }
.bank-card{
  display:flex; align-items:center; gap:14px;
  background:var(--paper-2);
  border:1px solid var(--hair);
  border-radius:8px;
  padding:14px 16px;
}
.bank-card .stack{ display:grid; flex:none; }
.bank-card .stack .chip{ grid-area:1/1; width:46px; }
.bank-card .stack .chip:nth-child(2){ transform:translateY(-7px); }
.bank-card .stack .chip:nth-child(3){ transform:translateY(-14px); }
.bank-card b{
  font-family:var(--display); font-weight:700;
  font-size:clamp(20px,2.4vw,27px); color:var(--navy); line-height:1;
}
.bank-card b em{
  font-style:normal; font-weight:600;
  font-size:12.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--navy-soft); margin-left:7px;
}
.bank-card p{ font-size:12px; color:var(--navy-soft); margin-top:3px; }

/* mistakes + cheat sheet */
.mistakes-grid{ display:grid; grid-template-columns:1fr; gap:14px; }
.panel-box{
  background:var(--paper-2);
  border:1px solid var(--hair);
  border-radius:8px;
  padding:14px 16px 16px;
}
.panel-box h2{
  font-family:var(--display); font-weight:700;
  font-size:14px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--navy); margin-bottom:10px;
}
.panel-box.centred h2{ text-align:center; }
.mistakes li{ display:grid; grid-template-columns:26px 1fr; gap:8px; padding:6px 0; }
.mistakes .n{ font-family:var(--display); font-weight:600; color:var(--crimson); font-size:13px; }
.mistakes b{ display:block; font-size:13.5px; color:var(--navy); font-weight:600; }
.mistakes span{ font-size:12.5px; color:var(--navy-soft); }

.cheat-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px; }
.cheat-cell{ text-align:center; }
.cheat-cell .pair{ display:flex; justify-content:center; gap:4px; margin-bottom:7px; }
.cheat-cell .pc{ width:clamp(30px,3.6vw,44px); }
.cheat-cell .pc .pip{ display:none; }
.cheat-cell span{
  font-family:var(--display); font-weight:600;
  font-size:11.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--navy);
}
.print-link{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin-top:11px;
  background:none; border:none;
  font-size:12.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--navy-2); text-decoration:underline; text-underline-offset:3px;
}
.print-link svg{ width:15px; height:15px; }
.print-link:hover{ color:var(--crimson); }

.author-box{
  display:flex; align-items:center; gap:14px;
  background:var(--paper-2);
  border:1px solid var(--hair);
  border-radius:8px;
  padding:14px 16px;
  margin:20px 0;
}
.author-box .avatar{ width:52px; height:52px; font-size:18px; }
.author-box b{
  font-family:var(--display); font-weight:600;
  font-size:14.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--navy);
}
.author-box p{ font-size:12.5px; color:var(--navy-soft); margin-top:2px; }

/* ---------- responsive ---------- */
@media (min-width:700px){
  .page-head .wrap{ grid-template-columns:1.05fr 1fr; }
  .glance{ grid-template-columns:repeat(2,1fr); }
  .pay-pair{ grid-template-columns:1fr 1fr; }
  .step-row{ grid-template-columns:auto 1fr auto; }
  .round{ grid-template-columns:auto 1fr auto; }
  .dec{ grid-template-columns:auto 1fr auto; }
  .summary-grid{ grid-template-columns:.9fr 1.1fr; }
  .prose .with-art{ grid-template-columns:1.2fr .8fr; }
  .sh-grid{ grid-template-columns:1fr 1.1fr; align-items:center; }
  .bank-cards{ grid-template-columns:repeat(3,1fr); }
  .mistakes-grid{ grid-template-columns:1fr 1.05fr; }
  .rail-btn{ display:grid; }
  .cta-chips{ display:flex; }
}
@media (min-width:1000px){
  .gtabs{ top:74px; }
}

/* ---------- print (cheat sheet / article) ---------- */
@media print{
  .site-header,.drawer,.gtabs,.site-footer,.share-row,.cta-band,.test-panel,
  .rail-wrap,.head-river,.rail-btn,.hamburger{ display:none !important; }
  body{ background:#fff; color:#000; }
  .wrap{ width:100%; }
  a[href]::after{ content:""; }
}

/* ---------- accordion (keyed to .faq-list so it works on any page) ---------- */
.faq-list details{ border-bottom:1px solid var(--hair); }
.faq-list details:last-child{ border-bottom:none; }
.faq-list summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:15px 14px; min-height:54px;
  font-size:15px; font-weight:500; color:var(--navy);
}
.faq-list summary::-webkit-details-marker{ display:none; }
.faq-list summary::marker{ content:""; }
.faq-list summary:hover{ background:var(--paper-3); }
.faq-list summary .plus{ position:relative; width:14px; height:14px; flex:none; }
.faq-list summary .plus::before,
.faq-list summary .plus::after{
  content:""; position:absolute; background:var(--navy-soft);
  transition:transform .2s var(--ease);
}
.faq-list summary .plus::before{ left:0; top:6px; width:14px; height:2px; }
.faq-list summary .plus::after { top:0; left:6px; height:14px; width:2px; }
.faq-list details[open] summary .plus::after{ transform:scaleY(0); }
.faq-list .answer{ padding:0 14px 16px; font-size:14.5px; color:var(--navy-soft); }
.faq-list .answer p{ margin-bottom:9px; }
.faq-list .answer p:last-child{ margin-bottom:0; }

/* =========================================================
   CATEGORY / INDEX PAGE
   ========================================================= */

.cat-head{ padding:6px 0 clamp(14px,2.2vw,24px); }
.cat-head h1{
  font-family:var(--display); font-weight:700;
  font-size:clamp(32px,5vw,52px);
  line-height:1.02; text-transform:uppercase;
  color:var(--navy); margin-bottom:10px;
}
.cat-head p{
  font-size:clamp(15px,1.5vw,18px);
  color:var(--navy-2); max-width:56ch;
}

/* filter chips */
.filters{
  display:flex; gap:8px; flex-wrap:wrap;
  padding:4px 0 clamp(16px,2.4vw,26px);
  border-bottom:1px solid var(--hair);
  margin-bottom:clamp(16px,2.4vw,26px);
}
.filter{
  font-family:var(--display); font-weight:600;
  font-size:12.5px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--navy);
  background:var(--paper-2);
  border:1px solid var(--hair);
  border-radius:20px;
  padding:9px 17px; min-height:40px;
  transition:background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease);
}
.filter:hover{ background:var(--paper-3); border-color:var(--navy-soft); }
.filter[aria-pressed="true"]{
  background:var(--crimson); color:#FBF6EC; border-color:var(--crimson);
}
.filter .count{ opacity:.6; margin-left:6px; font-weight:500; }

.result-line{
  font-size:13px; color:var(--navy-soft);
  margin-bottom:14px;
}

/* card grid */
.cat-grid{
  display:grid; grid-template-columns:1fr;
  gap:14px;
  align-items:start;
}
.cat-card{
  background:var(--paper-2);
  border:1px solid var(--hair);
  border-radius:8px;
  overflow:hidden;
  display:flex; flex-direction:column;
  text-decoration:none; color:inherit;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease);
}
.cat-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.cat-card[hidden]{ display:none; }

.cat-img{
  position:relative; aspect-ratio:16/10;
  display:grid; place-items:center;
  background:linear-gradient(150deg,var(--felt-top),var(--felt-low));
  overflow:hidden;
}
.cat-img svg{ width:58%; height:58%; color:#9FBBDD; fill:currentColor; opacity:.42; }
.cat-img .guide-tag{ position:absolute; left:10px; top:10px; }

.cat-body{ padding:13px 15px 16px; display:flex; flex-direction:column; flex:1; }
.cat-body h2{
  font-family:var(--display); font-weight:600;
  font-size:17px; line-height:1.24;
  color:var(--navy); margin-bottom:5px;
}
.cat-body p{ font-size:13px; color:var(--navy-soft); margin-bottom:12px; }
.cat-meta{
  display:flex; align-items:center; gap:6px;
  font-size:11px; color:var(--navy-soft); margin-bottom:7px;
}
.cat-meta svg{ width:12px; height:12px; }
.cat-body .more{
  margin-top:auto;
  font-family:var(--display); font-weight:600;
  font-size:12px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--crimson);
  display:inline-flex; align-items:center; gap:6px;
}
.cat-body .more svg{ width:14px; height:14px; transition:transform .18s var(--ease); }
.cat-card:hover .more svg{ transform:translateX(4px); }

/* the lead card spans two columns and puts art beside the copy */
.cat-card.lead .cat-img{ aspect-ratio:16/9; }
.cat-card.lead .cat-body h2{ font-size:clamp(19px,2.2vw,26px); }
.cat-card.lead .cat-body p{ font-size:14px; }

.empty-note{
  padding:26px 0; text-align:center;
  font-size:14px; color:var(--navy-soft);
}

@media (min-width:700px){
  .cat-grid{ grid-template-columns:repeat(2,1fr); }
  .cat-card.lead{ grid-column:1 / -1; flex-direction:row; }
  .cat-card.lead .cat-img{ flex:0 0 46%; aspect-ratio:auto; }
  .cat-card.lead .cat-body{ justify-content:center; padding:20px 24px; }
}
@media (min-width:1000px){
  .cat-grid{ grid-template-columns:repeat(3,1fr); }
  .cat-card.lead .cat-img{ flex:0 0 50%; }
}

/* =========================================================
   Rules that replaced inline style attributes.
   All presentation lives here; the HTML carries only classes.
   ========================================================= */

/* the three labelled columns inside the table-setup diagram */
.diag-col{ text-align:center; }

/* footnote inside the crimson 3-Card Bonus card */
.pay-card.dark .foot{ color:#F0D9CF; }

/* face-down card used in the "one complete hand" carousel */
.hand-card .down{
  display:block;
  width:clamp(34px,3.8vw,44px);
  aspect-ratio:5/7;
  border-radius:5px;
  background:
    repeating-linear-gradient(45deg, rgba(255,248,236,.24) 0 1.2px, transparent 1.2px 6px),
    linear-gradient(160deg,#25497A,#12305A);
  border:2px solid var(--card-face);
}

/* spacing that used to be set per element */
.sh-grid{ margin-top:14px; }
.bank-cards{ margin-top:14px; }
.gsec .faq-list{ margin-top:12px; }

/* the point-system note under the starting-hand table */
.sh-note{
  font-size:12.5px;
  color:var(--navy-soft);
  margin-top:10px;
}

/* icon inside a full-width crimson button */
.cta-wide svg{
  width:17px; height:17px;
  margin-right:8px;
  flex:none;
}

/* ---------- legal / about pages ---------- */
.legal{ max-width:70ch; }
.legal h2{
  font-family:var(--display); font-weight:700;
  font-size:clamp(16px,1.9vw,21px);
  letter-spacing:.03em; text-transform:uppercase;
  color:var(--navy);
  margin:26px 0 10px;
}
.legal h2:first-child{ margin-top:0; }
.legal p{ margin-bottom:12px; }
.legal ul{ list-style:disc; padding-left:22px; margin:0 0 14px; }
.legal li{ margin-bottom:7px; }
.legal a{ color:var(--crimson); }
.legal-date{ color:var(--navy-soft); font-size:13.5px; }
.legal-note{
  background:var(--paper-3);
  border-left:3px solid var(--gold);
  border-radius:0 6px 6px 0;
  padding:12px 16px;
  font-size:13.5px;
  margin-top:22px;
}

/* =========================================================
   ARTICLE POST TEMPLATE
   Two columns: the piece on the left, a sticky index on the right.
   ========================================================= */

.article-layout{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(24px,3.4vw,44px);
  align-items:start;
  padding:0 0 clamp(26px,4vw,48px);
}
.article-main{ min-width:0; }

/* ---------- head ---------- */
.post-head{ padding-top:4px; }
.post-head .tag-chip{ margin:10px 0 12px; }
.post-head h1{
  font-family:var(--display); font-weight:700;
  font-size:clamp(30px,4.6vw,48px);
  line-height:1.02; text-transform:uppercase;
  color:var(--navy); margin-bottom:12px;
}
.post-lede{
  font-size:clamp(15px,1.5vw,17.5px);
  color:var(--navy-2);
  max-width:62ch; margin-bottom:14px;
}
.post-meta{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-family:var(--display); font-weight:500;
  font-size:12px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--navy-soft);
  margin-bottom:18px;
}
.post-meta .dot{ color:var(--crimson); }

/* ---------- hero image ---------- */
.post-hero{
  position:relative;
  border-radius:8px;
  overflow:hidden;
  aspect-ratio:16/9;
  background:radial-gradient(120% 100% at 60% 25%, #2E5F92 0%, #17365F 45%, #091B33 100%);
  display:grid; place-items:center;
  margin-bottom:clamp(18px,2.4vw,28px);
}
.post-hero svg{ width:62%; height:62%; color:#8FB0D6; opacity:.5; }
.post-hero .plate{
  position:absolute; bottom:10%; left:50%; transform:translateX(-50%);
  font-family:var(--display); font-weight:600;
  font-size:clamp(12px,1.6vw,19px); letter-spacing:.24em; text-transform:uppercase;
  color:rgba(214,180,120,.9); white-space:nowrap;
}
.img-note{
  margin:-14px 0 20px;
  font-size:11.5px; font-style:italic; color:var(--navy-soft);
}

/* ---------- the short version ---------- */
.short-box{
  border:1px solid var(--crimson);
  border-radius:6px;
  padding:16px 20px 18px;
  margin-bottom:clamp(22px,3vw,34px);
}
.short-box h2{
  font-family:var(--display); font-weight:700;
  font-size:14px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--crimson); margin-bottom:9px;
}
.short-box p{ font-size:14.5px; color:var(--navy-2); margin:0; }

/* ---------- article body ---------- */
.post-body{ max-width:70ch; }
.post-body h2{
  font-family:var(--display); font-weight:600;
  font-size:clamp(19px,2.2vw,25px);
  color:var(--navy);
  margin:26px 0 8px;
  letter-spacing:.01em;
}
.post-body h2:first-child{ margin-top:0; }
.post-body h3{
  font-family:var(--display); font-weight:600;
  font-size:16px; letter-spacing:.03em;
  color:var(--navy); margin:20px 0 6px;
}
.post-body p{ font-size:15px; color:var(--navy-soft); margin-bottom:12px; }
.post-body ul{ list-style:disc; padding-left:22px; margin:0 0 14px; }
.post-body li{ font-size:15px; color:var(--navy-soft); margin-bottom:5px; }
.post-body b{ color:var(--navy); }
.post-body a{ color:var(--crimson); }

/* ---------- centred pull quote ---------- */
.post-quote{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:16px;
  margin:clamp(24px,3.2vw,36px) 0;
}
.post-quote .mark{
  font-family:Georgia,serif; font-size:34px; line-height:1;
  color:var(--crimson);
}
.post-quote blockquote{
  text-align:center;
  font-size:clamp(15px,1.7vw,18.5px);
  color:var(--navy-2);
  border-top:1px solid var(--crimson);
  border-bottom:1px solid var(--crimson);
  padding:14px 8px;
  margin:0;
}

/* ---------- about the writer ---------- */
.writer-box{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:18px;
  align-items:start;
  border:1px solid var(--hair);
  border-radius:6px;
  padding:18px 20px;
  margin:clamp(22px,3vw,32px) 0;
}
.writer-avatar{
  width:84px; height:84px; border-radius:50%;
  display:grid; place-items:center;
  background:linear-gradient(150deg,var(--felt-top),var(--felt-low));
  color:#E4EDF8;
  font-family:var(--display); font-weight:600; font-size:28px;
  letter-spacing:.02em;
}
.writer-box .kicker{
  display:block;
  font-family:var(--display); font-weight:600;
  font-size:11.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--crimson); margin-bottom:3px;
}
.writer-box .name{
  font-family:var(--display); font-weight:700;
  font-size:clamp(18px,2vw,23px); letter-spacing:.02em; text-transform:uppercase;
  color:var(--navy); line-height:1.1;
}
.writer-box .role{
  display:block;
  font-family:var(--display); font-weight:500;
  font-size:11.5px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--navy-2); margin:2px 0 8px;
}
.writer-box p{ font-size:13.5px; color:var(--navy-soft); margin:0; }

/* ---------- related articles ---------- */
.related-head{
  display:flex; align-items:center; gap:16px;
  margin:clamp(24px,3.2vw,36px) 0 14px;
}
.related-head h2{
  font-family:var(--display); font-weight:700;
  font-size:clamp(15px,1.8vw,20px);
  letter-spacing:.07em; text-transform:uppercase;
  color:var(--navy); white-space:nowrap;
}
.related-head::after{ content:""; flex:1; height:1px; background:var(--hair); }

.related-grid{ display:grid; grid-template-columns:1fr; gap:14px; }
.related-card{
  border:1px solid var(--hair);
  border-radius:6px;
  overflow:hidden;
  background:var(--paper-2);
  text-decoration:none; color:inherit;
  display:flex; flex-direction:column;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease);
}
.related-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.related-thumb{
  aspect-ratio:16/9;
  display:grid; place-items:center;
  background:linear-gradient(150deg,var(--felt-top),var(--felt-low));
}
.related-thumb svg{ width:52%; height:52%; color:#9FBBDD; fill:currentColor; opacity:.42; }
.related-card .body{ padding:12px 14px 14px; }
.related-card h3{
  font-family:var(--display); font-weight:600;
  font-size:15.5px; color:var(--navy); line-height:1.25; margin-bottom:6px;
}
.related-card .meta{
  font-family:var(--display); font-weight:500;
  font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--navy-soft);
}
.related-card .meta b{ color:var(--crimson); font-weight:600; }

/* ---------- sticky sidebar ---------- */
.article-side{ min-width:0; }
.side-head{
  font-family:var(--display); font-weight:700;
  font-size:clamp(14px,1.5vw,17px);
  letter-spacing:.07em; text-transform:uppercase;
  color:var(--navy);
  padding-bottom:10px;
  border-bottom:2px solid var(--crimson);
  margin-bottom:4px;
}
.side-list li{ border-bottom:1px solid var(--hair); }
.side-list li:last-child{ border-bottom:none; }
.side-item{
  display:grid; grid-template-columns:72px 1fr; gap:13px;
  align-items:center;
  padding:13px 0;
  text-decoration:none; color:inherit;
}
.side-thumb{
  width:72px; aspect-ratio:1/1;
  border-radius:4px;
  display:grid; place-items:center;
  background:linear-gradient(150deg,var(--felt-top),var(--felt-low));
}
.side-thumb svg{ width:56%; height:56%; color:#9FBBDD; fill:currentColor; opacity:.45; }
.side-item h3{
  font-family:var(--display); font-weight:600;
  font-size:14.5px; line-height:1.24; color:var(--navy);
  transition:color .18s var(--ease);
}
.side-item:hover h3{ color:var(--crimson); }
.side-item .meta{
  display:block; margin-top:4px;
  font-family:var(--display); font-weight:500;
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--navy-soft);
}
.side-all{
  display:block; text-align:center;
  margin-top:16px;
  border:1px solid var(--crimson);
  border-radius:5px;
  padding:12px 16px; min-height:44px;
  font-family:var(--display); font-weight:600;
  font-size:12.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--crimson); text-decoration:none;
  transition:background .18s var(--ease), color .18s var(--ease);
}
.side-all:hover{ background:var(--crimson); color:#FBF6EC; }

@media (min-width:900px){
  .article-layout{ grid-template-columns:minmax(0,1fr) clamp(260px,26vw,330px); }
  .related-grid{ grid-template-columns:repeat(3,1fr); }
  .article-side .side-inner{ position:sticky; top:88px; }
}

/* =========================================================
   POCKET GUIDE - pay table, card values, strategy cards,
   and the full return table.
   ========================================================= */

/* ---------- simple two-column pay table ---------- */
.pay-simple{
  border:1px solid var(--hair);
  border-radius:6px;
  overflow:hidden;
  margin:0 0 clamp(20px,2.6vw,28px);
}
.pay-simple caption{
  caption-side:top;
  background:var(--navy);
  color:#F3EEE2;
  font-family:var(--display); font-weight:600;
  font-size:13.5px; letter-spacing:.09em; text-transform:uppercase;
  padding:11px 14px;
  text-align:left;
}
.pay-simple table{ width:100%; border-collapse:collapse; }
.pay-simple th{
  font-family:var(--display); font-weight:600;
  font-size:11.5px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--navy-soft);
  text-align:left;
  padding:9px 14px;
  background:var(--paper-3);
  border-bottom:1px solid var(--hair);
}
.pay-simple th:last-child, .pay-simple td:last-child{ text-align:right; }
.pay-simple td{
  padding:9px 14px;
  font-size:14px;
  color:var(--navy-2);
  border-bottom:1px solid rgba(217,205,180,.55);
}
.pay-simple tr:last-child td{ border-bottom:none; }
.pay-simple tbody tr:nth-child(odd){ background:var(--paper-2); }
.pay-simple td.pays{
  font-family:var(--display); font-weight:600;
  color:var(--navy); white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.pay-simple tr.top td.pays{ color:var(--crimson); }
.pay-simple tr.push td.pays{ color:#8A6A2E; }
.pay-simple tr.loss td.pays{ color:var(--navy-soft); }

/* ---------- card values ---------- */
.value-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:10px;
  margin:0 0 clamp(20px,2.6vw,28px);
}
.value-card{
  border:1px solid var(--hair);
  border-radius:6px;
  background:var(--paper-2);
  padding:14px 16px;
  text-align:center;
}
.value-card .band{
  display:block;
  font-family:var(--display); font-weight:700;
  font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  margin-bottom:6px;
}
.value-card.high .band{ color:var(--crimson); }
.value-card.mid  .band{ color:#8A6A2E; }
.value-card.low  .band{ color:var(--navy-soft); }
.value-card .cards{
  font-family:var(--display); font-weight:700;
  font-size:clamp(19px,2.2vw,25px);
  color:var(--navy); line-height:1.1;
}
.value-card .pts{
  display:block; margin-top:5px;
  font-size:12.5px; color:var(--navy-soft);
}

/* ---------- strategy cards ---------- */
.strat-grid{
  display:grid; grid-template-columns:1fr; gap:12px;
  margin:0 0 clamp(20px,2.6vw,28px);
}
.strat-card{
  border:1px solid var(--hair);
  border-radius:6px;
  background:var(--paper-2);
  overflow:hidden;
}
.strat-card > h3{
  background:var(--navy);
  color:#F3EEE2;
  font-family:var(--display); font-weight:600;
  font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  padding:10px 14px;
  margin:0;
}
.rule-list{ padding:6px 0; }
.rule-list li{
  display:grid;
  grid-template-columns:58px 1fr;
  gap:11px;
  align-items:baseline;
  padding:7px 14px;
  font-size:13.5px;
  color:var(--navy-soft);
  border-bottom:1px solid rgba(217,205,180,.5);
}
.rule-list li:last-child{ border-bottom:none; }
.tag{
  font-family:var(--display); font-weight:600;
  font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  text-align:center;
  padding:3px 0;
  border-radius:3px;
}
.tag.r3{ background:#DCEBDF; color:#1B5E33; }
.tag.r1{ background:#F6EBD2; color:#7A5C22; }   /* 4.24 -> 5.24 on its own chip */
.tag.fold{ background:#F4DAD9; color:var(--crimson); }

/* ---------- first-person note ---------- */
.note-personal{
  border-left:3px solid var(--gold);
  background:var(--paper-3);
  border-radius:0 6px 6px 0;
  padding:14px 18px;
  margin:0 0 clamp(20px,2.6vw,28px);
}
.note-personal .who{
  display:block;
  font-family:var(--display); font-weight:600;
  font-size:11px; letter-spacing:.13em; text-transform:uppercase;
  /* --gold is decorative; as a label on paper it was 2.04:1 */
  color:#7A5C22; margin-bottom:6px;
}
.note-personal p{ margin:0 0 8px; font-size:14px; color:var(--navy-2); }
.note-personal p:last-child{ margin-bottom:0; }

/* ---------- return table ---------- */
.return-wrap{
  border:1px solid var(--hair);
  border-radius:6px;
  margin:0 0 10px;
  overflow:hidden;
}
.return-scroll{ overflow-x:auto; max-height:520px; overflow-y:auto; }
.return-table{
  width:100%;
  border-collapse:collapse;
  font-size:12.5px;
  min-width:600px;
}
.return-table thead th{
  position:sticky; top:0; z-index:2;
  background:var(--navy);
  color:#F3EEE2;
  font-family:var(--display); font-weight:600;
  font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
  padding:9px 10px;
  text-align:right;
  white-space:nowrap;
}
.return-table thead th:nth-child(4){ text-align:left; }
.return-table td{
  padding:6px 10px;
  border-bottom:1px solid rgba(217,205,180,.5);
  text-align:right;
  font-variant-numeric:tabular-nums;
  color:var(--navy-2);
  white-space:nowrap;
}
.return-table td.hand{ text-align:left; color:var(--navy); }
.return-table td.street{
  color:var(--navy-soft);
  font-family:var(--display); font-weight:600;
}
.return-table tbody tr:nth-child(even){ background:var(--paper-2); }
.return-table tr.is-loss td.ret{ color:var(--crimson); }
.return-table tr.is-win  td.ret{ color:var(--green); }
.return-table tr.block-start td{ border-top:2px solid var(--hair); }
.return-note{
  font-size:12px; color:var(--navy-soft);
  margin:0 0 clamp(20px,2.6vw,28px);
}

@media (min-width:640px){
  .strat-grid{ grid-template-columns:repeat(3,1fr); align-items:start; }
}

/* =========================================================
   STRATEGY GUIDE - numbered walkthrough layout.
   Full-width single column: the decision tables need the
   horizontal room, so this page drops the article sidebar
   and moves Latest / Related to the foot of the page.
   ========================================================= */

/* ---------- hero ---------- */
.strat-head{ padding-top:clamp(14px,2vw,22px); }
.strat-head h1{
  font-family:var(--display); font-weight:700;
  font-size:clamp(28px,4.6vw,50px);
  line-height:1.04;
  letter-spacing:.005em;
  color:var(--navy);
  text-transform:uppercase;
  text-wrap:balance;
  margin:8px 0 10px;
}
.strat-lede{
  font-size:clamp(15px,1.5vw,18px);
  line-height:1.55;
  color:var(--navy-2);
  max-width:56ch;
  margin:0 0 14px;
}
.strat-meta{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:10px 18px;
  font-family:var(--display); font-weight:600;
  font-size:12px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--navy);
  margin:0 0 clamp(16px,2vw,22px);
  padding:0; list-style:none;
}
.strat-meta li{ display:flex; align-items:center; gap:7px; }
.strat-meta svg{ width:16px; height:16px; color:var(--navy-soft); flex:none; }
.strat-meta .sep{ color:var(--hair); }

/* Placeholder art band. Swap the inner .strat-hero-art for a
   photograph when one exists; the band keeps its own height. */
.strat-hero{
  position:relative;
  /* width must be stated: with aspect-ratio set, a min-height would otherwise
     drive the width off the ratio and push the band past the viewport. */
  width:100%;
  border-radius:10px;
  overflow:hidden;
  aspect-ratio:16/7;
  background:
    radial-gradient(120% 150% at 78% 30%, rgba(194,165,115,.30), transparent 55%),
    linear-gradient(168deg, #1D3E6B 0%, var(--navy) 42%, #0C2545 100%);
  margin:0 0 clamp(20px,2.6vw,30px);
  display:grid; place-items:center;
}
.strat-hero .boat-bg{
  position:absolute; left:50%; top:50%;
  width:min(62%,520px); height:auto;
  transform:translate(-50%,-52%);
  color:rgba(194,165,115,.30);
  pointer-events:none;
}
.strat-hero-art{
  position:relative; z-index:1;
  display:flex; align-items:flex-end; gap:clamp(4px,1vw,10px);
  padding:0 4%;
}
.strat-hero-art .pc{ box-shadow:0 10px 22px rgba(0,0,0,.35); }
.strat-hero-note{
  position:absolute; z-index:2; right:10px; bottom:8px;
  font-family:var(--display); font-weight:600;
  font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(251,247,238,.62);
}

/* ---------- the short version ---------- */
.short-box{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:14px;
  align-items:start;
}
.short-box .sb-ic{
  width:40px; height:40px;
  display:grid; place-items:center;
  color:var(--crimson);
  flex:none;
}
.short-box .sb-ic svg{ width:30px; height:30px; }
.short-box ul{ list-style:none; margin:0; padding:0; }
.short-box li{
  font-size:14.5px; line-height:1.6; color:var(--navy-2);
  padding-left:0;
}

/* ---------- numbered section ---------- */
.step-block{ margin:0 0 clamp(24px,3.2vw,38px); }
.step-title{
  display:flex; align-items:baseline; gap:9px;
  font-family:var(--display); font-weight:600;
  font-size:clamp(16px,2vw,21px);
  letter-spacing:.05em; text-transform:uppercase;
  color:var(--navy);
  margin:0 0 4px;
}
.step-title .n{ color:var(--crimson); font-weight:700; }
.step-sub{
  font-size:14px; color:var(--navy-soft);
  margin:0 0 14px;
}

/* ---------- small playing card ---------- */
.pc.sm{ width:clamp(40px,5.2vw,58px); border-radius:5px; }
.pc.sm .idx b{ font-size:clamp(12px,1.5vw,16px); }
.pc.sm .idx svg{ width:clamp(7px,.9vw,10px); height:clamp(7px,.9vw,10px); }
.pc.sm .pip{ width:42%; height:42%; }

/* ---------- 1. point system ---------- */
.points-table{
  border:1px solid var(--hair);
  border-radius:8px;
  overflow:hidden;
  background:var(--paper-2);
}
.point-row{
  display:flex; align-items:center; gap:clamp(10px,2vw,26px);
  flex-wrap:wrap;
  padding:clamp(9px,1.2vw,13px) clamp(11px,1.6vw,18px);
  border-bottom:1px solid rgba(217,205,180,.6);
}
.point-row:last-child{ border-bottom:none; }
.point-cards{ display:flex; gap:clamp(5px,.8vw,9px); flex:none; }
.point-eq{
  display:flex; align-items:center; gap:10px;
  font-family:var(--display); font-weight:600;
  font-size:clamp(12px,1.4vw,14px);
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--navy);
}
.point-eq .op{ color:var(--navy-soft); font-weight:400; }
.point-foot{
  font-size:13px; color:var(--navy-soft);
  margin:9px 0 0; text-align:center;
}

/* ---------- 2. decision bands ---------- */
.dec-band{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:"tag cards" "text text";
  gap:10px clamp(12px,2vw,22px);
  align-items:center;
  border:1px solid var(--hair);
  border-radius:8px;
  padding:clamp(11px,1.5vw,16px) clamp(12px,1.8vw,20px);
  margin-bottom:10px;
}
.dec-band .dec-tag{
  grid-area:tag;
  font-family:var(--display); font-weight:700;
  font-size:clamp(14px,1.9vw,20px);
  letter-spacing:.06em; text-transform:uppercase;
  white-space:nowrap;
}
.dec-band .dec-cards{
  grid-area:cards;
  display:flex; align-items:center; gap:clamp(5px,.8vw,9px);
  flex-wrap:wrap;
}
.dec-band .dec-or{
  font-family:var(--display); font-weight:600;
  font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--navy-soft);
  padding:0 4px;
}
.dec-band .dec-text{ grid-area:text; }
.dec-band .dec-text b{
  display:block;
  font-family:var(--display); font-weight:600;
  font-size:14.5px; color:var(--navy);
  margin-bottom:3px;
}
.dec-band .dec-text p{
  margin:0; font-size:13.5px; line-height:1.55; color:var(--navy-soft);
}
.dec-band.d3{ background:#EFF4EF; border-color:#CBDBCE; }
.dec-band.d3 .dec-tag{ color:#1B5E33; }
.dec-band.d1{ background:#FDF6E7; border-color:#E7D6AE; }
.dec-band.d1 .dec-tag{ color:#8A6A2E; }
.dec-band.df{ background:#FBEFEE; border-color:#E8CBC9; }
.dec-band.df .dec-tag{ color:var(--crimson); }

/* ---------- full-width callout bars ---------- */
.callout-bar{
  display:flex; align-items:center; gap:11px;
  background:var(--navy);
  color:#F3EEE2;
  border-radius:6px;
  padding:11px 16px;
  margin:14px 0 0;
  font-family:var(--display); font-weight:600;
  font-size:clamp(12.5px,1.5vw,15px);
  letter-spacing:.05em; text-transform:uppercase;
}
.callout-bar svg{ width:19px; height:19px; flex:none; color:var(--gold); }
.callout-bar.warn{ background:var(--crimson); justify-content:center; text-align:center; }
.callout-bar.warn svg{ color:#F0C9C6; }

/* ---------- 3-5. street columns ---------- */
.street-cols{
  display:grid;
  grid-template-columns:1fr;
  gap:11px;
}
.street-card{
  border:1px solid var(--hair);
  border-radius:8px;
  padding:clamp(12px,1.6vw,16px);
  text-align:center;
}
.street-card > h3{
  font-family:var(--display); font-weight:700;
  font-size:clamp(14px,1.8vw,19px);
  letter-spacing:.06em; text-transform:uppercase;
  margin:0 0 11px;
}
.street-card .cards{
  display:flex; justify-content:center; gap:clamp(5px,.8vw,9px);
  flex-wrap:wrap;
  margin-bottom:11px;
}
.street-card .lbl{
  display:block;
  font-family:var(--display); font-weight:600;
  font-size:13px; letter-spacing:.07em; text-transform:uppercase;
  margin-bottom:5px;
}
.street-card p{
  margin:0; font-size:13.5px; line-height:1.55; color:var(--navy-soft);
}
.street-card.s3{ background:#EFF4EF; border-color:#CBDBCE; }
.street-card.s3 > h3, .street-card.s3 .lbl{ color:#1B5E33; }
.street-card.s1{ background:#FDF6E7; border-color:#E7D6AE; }
.street-card.s1 > h3, .street-card.s1 .lbl{ color:#8A6A2E; }
.street-card.sf{ background:#FBEFEE; border-color:#E8CBC9; }
.street-card.sf > h3, .street-card.sf .lbl{ color:var(--crimson); }

/* ---------- one complete hand ---------- */
.walk-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding-bottom:4px;
}
.walk{
  display:flex; align-items:stretch; gap:8px;
  min-width:max-content;
}
.walk-step{
  border:1px solid var(--hair);
  border-radius:8px;
  background:var(--paper-2);
  padding:12px 14px;
  width:clamp(150px,20vw,196px);
  display:flex; flex-direction:column; text-align:center;
}
.walk-step .cap{
  font-family:var(--display); font-weight:600;
  font-size:11px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--navy-soft);
  margin:0 0 9px;
}
.walk-step .cards{
  display:flex; justify-content:center; flex-wrap:wrap;
  gap:4px; margin-bottom:9px;
}
.walk-step .act{
  display:block;
  font-family:var(--display); font-weight:700;
  font-size:15px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--navy);
  margin-bottom:4px;
}
.walk-step .act.up{ color:#1B5E33; }
.walk-step .act.mid{ color:#8A6A2E; }
.walk-step p{
  margin:0; font-size:12.5px; line-height:1.5; color:var(--navy-soft);
}
.walk-sep{
  align-self:center; flex:none;
  width:16px; height:16px; color:var(--hair);
}
.walk-hint{
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:12px; color:var(--navy-soft);
  margin:9px 0 0;
}
.walk-hint svg{ width:15px; height:15px; }

/* ---------- bankroll + mistakes ---------- */
.two-col{
  display:grid; grid-template-columns:1fr;
  gap:clamp(20px,3vw,34px);
}
.bank-tiles{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
}
.bank-tile{
  border:1px solid var(--hair);
  border-radius:8px;
  padding:14px 10px;
  text-align:center;
}
.bank-tile svg{ width:30px; height:30px; color:var(--navy); margin-bottom:7px; }
.bank-tile b{
  display:block;
  font-family:var(--display); font-weight:700;
  font-size:clamp(13px,1.6vw,16px);
  letter-spacing:.05em; text-transform:uppercase;
  color:var(--navy);
  margin-bottom:4px;
}
.bank-tile p{ margin:0; font-size:12.5px; line-height:1.5; color:var(--navy-soft); }

.mistake-list{ list-style:none; margin:0; padding:0; }
.mistake-list li{
  display:grid; grid-template-columns:auto 1fr;
  gap:13px; align-items:center;
  padding:11px 2px;
  border-bottom:1px solid rgba(217,205,180,.6);
  font-size:14px; line-height:1.5; color:var(--navy-2);
}
.mistake-list li:last-child{ border-bottom:none; }
.mistake-list .n{
  width:34px; height:34px; flex:none;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--crimson);
  color:#FBF6EC;
  font-family:var(--display); font-weight:700;
  font-size:12.5px;
  font-variant-numeric:tabular-nums;
}

/* ---------- latest / related at the foot ---------- */
.art-foot{
  display:grid; grid-template-columns:1fr;
  gap:clamp(22px,3vw,36px);
  margin-top:clamp(24px,3.4vw,40px);
}

@media (min-width:700px){
  .strat-hero{ aspect-ratio:1000/300; }
  .street-cols{ grid-template-columns:repeat(3,1fr); }
  .dec-band{
    grid-template-columns:auto auto 1fr;
    grid-template-areas:"tag cards text";
  }
  .dec-band .dec-text{ text-align:left; }
}

@media (min-width:900px){
  .two-col{ grid-template-columns:1fr 1fr; }
  .art-foot{ grid-template-columns:minmax(0,340px) 1fr; }
}

/* =========================================================
   DESKTOP TREATMENT  (>=900px)

   Everything below is additive: on narrow screens the page keeps the
   flat, single-column layout it already had. At this width the numbered
   sections become bordered panels, the point bands and the first-two-card
   bands become three-column card grids, and the hero gains the
   quick-reference card on the right.
   ========================================================= */

/* current page in the shared header nav. The generator sets aria-current on
   one primary-nav link, so nothing here can light up the wrong page. */
.site-nav a[aria-current="page"]{
  color:var(--navy);
  font-weight:600;
  border-bottom-color:var(--crimson);
}

/* Quick reference repeats "The Short Version" verbatim, so it is desktop-only:
   below the breakpoint it would be a confusing duplicate. */
.quick-ref{ display:none; }
/* step numbers in the walkthrough captions are desktop-only too */
.walk-step .cap .stepn{ display:none; }

@media (min-width:900px){

  /* ---------- hero: masthead + quick reference ---------- */
  .strat-top{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,300px);
    gap:clamp(18px,2.2vw,28px);
    align-items:end;
  }
  .strat-top-main{ min-width:0; }
  .strat-head{ padding-top:0; }

  .quick-ref{
    display:block;
    min-width:0;
    border:1px solid var(--hair);
    border-radius:10px;
    background:rgba(255,255,255,.4);
    padding:10px;
    margin:0 0 clamp(20px,2.6vw,30px);
  }
  .qr-head{
    background:var(--navy);
    color:#F3EEE2;
    border-radius:6px;
    padding:9px 12px;
    text-align:center;
    font-family:var(--display); font-weight:600;
    font-size:14px; letter-spacing:.12em; text-transform:uppercase;
  }
  .qr-list{ display:grid; gap:9px; margin-top:9px; }
  .qr-item{
    border:1px solid var(--hair);
    border-radius:8px;
    padding:11px 13px;
    text-align:center;
  }
  .qr-item b{
    display:block;
    font-family:var(--display); font-weight:700;
    font-size:21px; letter-spacing:.05em; text-transform:uppercase;
    line-height:1.1;
    margin-bottom:4px;
  }
  .qr-item p{ margin:0; font-size:13.5px; line-height:1.45; color:var(--navy-soft); }
  .qr-item.q3{ background:#EFF4EF; border-color:#CBDBCE; }
  .qr-item.q3 b{ color:#1B5E33; }
  .qr-item.q1{ background:#FDF6E7; border-color:#E7D6AE; }
  .qr-item.q1 b{ color:#8A6A2E; }
  .qr-item.qf{ background:#FBEFEE; border-color:#E8CBC9; }
  .qr-item.qf b{ color:var(--crimson); }

  /* ---------- the short version goes horizontal ---------- */
  .short-box{
    align-items:center;
    gap:18px;
    padding:16px 24px;
  }
  .short-box > div{
    display:grid;
    grid-template-columns:minmax(0,170px) minmax(0,1fr);
    gap:clamp(18px,2.4vw,34px);
    align-items:center;
  }
  .short-box h2{
    margin-bottom:0;
    font-size:19px;
    line-height:1.15;
  }
  .short-box li{ font-size:15px; }

  /* ---------- every numbered section becomes a bordered panel ---------- */
  .step-block{
    border:1px solid var(--hair);
    border-radius:10px;
    background:rgba(255,255,255,.4);
    padding:var(--panel-pad,20px);
  }
  .step-block{ --panel-pad:clamp(16px,1.7vw,22px); }
  /* the callout bars read as a footer band across the whole panel */
  .step-block > .callout-bar{
    margin-left:calc(-1 * var(--panel-pad));
    margin-right:calc(-1 * var(--panel-pad));
    margin-bottom:calc(-1 * var(--panel-pad));
    border-radius:0 0 9px 9px;
  }

  /* ---------- 1. point system: one column per band ---------- */
  .points-table{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    border:0;
    background:none;
    overflow:visible;
  }
  /* column-reverse puts the label above the cards without touching the markup */
  .point-row,
  .point-row:last-child{
    flex-direction:column-reverse;
    flex-wrap:nowrap;
    align-items:center;
    justify-content:flex-end;
    gap:11px;
    padding:13px 12px;
    border:1px solid var(--hair);
    border-radius:8px;
    background:var(--paper-2);
  }
  .point-cards{ justify-content:center; flex-wrap:wrap; }
  .point-eq{ justify-content:center; font-size:14px; }
  .point-eq .op{ display:none; }

  /* ---------- 2. first two cards: same card shape as the streets ---------- */
  .dec-cols{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:11px;
  }
  .dec-band{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"tag" "cards" "text";
    align-content:start;
    justify-items:center;
    gap:11px;
    margin-bottom:0;
    text-align:center;
  }
  .dec-band .dec-cards{ justify-content:center; }
  .dec-band .dec-text{ text-align:center; }
  .dec-band .dec-text b{ font-size:15px; margin-bottom:4px; }
  .dec-band.d3 .dec-text b{ color:#1B5E33; }
  .dec-band.d1 .dec-text b{ color:#8A6A2E; }
  .dec-band.df .dec-text b{ color:var(--crimson); }

  /* ---------- 5. one complete hand: only the new card per step ---------- */
  .walk-wrap{ overflow-x:visible; padding-bottom:0; }
  .walk{ min-width:0; gap:9px; }
  .walk-step{
    width:auto;
    flex:1 1 0;
    min-width:0;
    background:var(--paper-2);
  }
  .walk-step:last-child{ flex-grow:1.75; }
  .walk-step .cards .pc.carry{ display:none; }
  .walk-step .cap .stepn{ display:inline; margin-right:5px; }
  .walk .pc.sm{ width:clamp(36px,3.5vw,46px); }
  .walk-sep{ width:18px; height:18px; color:var(--navy); }
  .walk-hint{ display:none; }

  /* ---------- 6 + 7 side by side, each in its own panel ---------- */
  .two-col{
    grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
    gap:clamp(18px,2vw,26px);
  }
  /* both panels stretch to the taller of the two, so the bankroll tiles
     spread down the panel instead of leaving a gap under them */
  .two-col .step-block{ display:flex; flex-direction:column; margin-bottom:0; }
  .two-col .bank-tiles{ flex:1 1 auto; }
  .two-col .bank-tile{ display:flex; flex-direction:column; justify-content:center; }
}

@media (prefers-reduced-motion:reduce){
  .walk-wrap{ scroll-behavior:auto; }
}

/* byline: the checkable-methodology note and the review date sit under the bio */
.writer-box .method{
  font-size:13px;
  color:var(--navy-soft);
  margin-top:8px;
}
.writer-box .reviewed{
  display:block;
  margin-top:8px;
  font-family:var(--display); font-weight:600;
  font-size:11px; letter-spacing:.11em; text-transform:uppercase;
  /* --gold is a decorative accent: as text on paper it was 2.2:1 */
  color:#8A6A2E;
}

/* provenance line under a statistic */
.source-note{
  font-size:13px;
  color:var(--navy-soft);
  margin-top:-4px;
}
.source-note a{ color:var(--crimson); }