/* Tape: a black stock-table band */
.tape{overflow:hidden;background:var(--ink);color:var(--paper);border-bottom:1px solid var(--ink)}
.tape-run{display:flex;width:max-content;animation:tape 70s linear infinite}
.tape:hover .tape-run{animation-play-state:paused}
.tape span{font-family:var(--mono);font-size:11.5px;padding:7px 14px;white-space:nowrap;color:#D9D2C2;border-right:1px solid #3a352d}
.tape span span{border:0;padding:0}
.tape b{color:#fff;font-weight:600;margin-right:6px;text-transform:uppercase;letter-spacing:.03em}
.tape .up{color:#9ED8A9}.tape .down{color:#FF8A7E}
@keyframes tape{to{transform:translateX(-50%)}}

/* Front page */
.sb-hero{display:flex;flex-direction:column;gap:14px}
.sb-hero .hero-h{font-size:58px;letter-spacing:-.03em}
.sb-hero .hero-h + p,.sb-hero p{font-style:italic;font-size:18px;color:var(--ink-2)}
@media (min-width:900px){.sb-hero .hero-h{font-size:92px}}

/* Jackpot: the front-page headline number */
.card.jp{background:transparent;border:0;border-top:3px double var(--ink);border-bottom:3px double var(--ink);padding:12px 0;display:flex;flex-direction:column;gap:4px;text-align:center}
.jp-amt{font-family:var(--head);font-weight:900;font-size:64px;line-height:1;color:var(--red);letter-spacing:-.02em;font-variant-numeric:lining-nums}
.card.jp .eyebrow{font-size:15px}
@media (min-width:900px){.jp-amt{font-size:84px}}

/* Coupon-style promo */
.promo{display:flex;flex-direction:column;gap:6px;background:transparent;border:2px dashed var(--ink);position:relative}
.promo b{font-family:var(--head);font-style:italic;font-size:20px}
.promo.on{border-style:solid;border-color:var(--red)}
.promo .btn{margin-top:4px}

/* Printed tickets: bet slip and my tickets */
.slip,.ticket{background:#FBF8F1;border:0;padding:22px 16px;position:relative;
  -webkit-mask:radial-gradient(circle 5px at 8px 0,#0000 98%,#000) top/16px 51% repeat-x,radial-gradient(circle 5px at 8px 100%,#0000 98%,#000) bottom/16px 51% repeat-x;
  mask:radial-gradient(circle 5px at 8px 0,#0000 98%,#000) top/16px 51% repeat-x,radial-gradient(circle 5px at 8px 100%,#0000 98%,#000) bottom/16px 51% repeat-x;
  filter:drop-shadow(0 1px 0 rgba(23,20,15,.45))}
.slip h2{font-family:var(--mono);font-style:normal;font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;border:0;padding:0}
.slip > .row-between:first-child{border-bottom:1px dashed var(--ink);padding-bottom:10px}
.slip .list{border-top:0}
.slip .trow{border-bottom:1px dashed var(--rule-soft);padding:8px 0}
.slip .grid2{border-top:1px dashed var(--ink);padding-top:8px}
.slip .grid2 b{font-family:var(--mono)}
.slip .grid2 .up{color:var(--red)}
.ticket{gap:6px;font-family:var(--mono)}
.ticket .eyebrow{font-family:var(--mono);font-variant:normal;text-transform:uppercase;font-size:10.5px;letter-spacing:.08em}
.ticket .row-between span{font-size:13px}
.ticket[data-status]::after{position:absolute;right:16px;top:44%;transform:rotate(-11deg);font-family:var(--head);font-weight:900;font-size:30px;letter-spacing:.12em;padding:0 12px 2px;border:3px solid currentColor;opacity:.82;mix-blend-mode:multiply;pointer-events:none}
.ticket[data-status="won"]::after{content:"WON";color:var(--green)}
.ticket[data-status="lost"]::after{content:"LOST";color:var(--red)}
.ticket[data-status="void"]::after{content:"VOID";color:var(--muted)}
.ticket[data-status="forfeit"]::after{content:"VOID";color:var(--red)}
.ticket[data-status="open"]::after{display:none}
.ticket:not([data-status="open"]) .chip{display:none}

/* Form-guide leg rows with moving odds */
.leg .handle{white-space:normal;font-family:var(--display);font-weight:600}
.odds{font-family:var(--mono);text-align:right;white-space:nowrap}
.odds b{font-size:17px;font-weight:700}
.odds s{color:var(--muted);font-size:12px}
.odds i{font-style:normal;font-size:10px}
.odds .dn{color:var(--red)}.odds .upm{color:var(--green)}

/* How it works, as a column of print */
.howto{background:transparent;border:0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:10px 0}
.howto summary{display:flex;justify-content:space-between;align-items:center;cursor:pointer;list-style:none;font-family:var(--head);font-style:italic;font-size:20px}
.howto summary::-webkit-details-marker{display:none}
.howto ol{margin:12px 0 4px;padding-left:22px;display:flex;flex-direction:column;gap:10px;font-size:16px;line-height:1.5}
.howto ol li::marker{font-family:var(--head);font-weight:900}
.howto ul{margin:6px 0 0;padding-left:18px}
@media (min-width:900px){.howto[open] ol{columns:2;column-gap:32px;display:block}.howto ol li{break-inside:avoid;margin-bottom:10px}}

/* Rubber stamp when you do something */
.stampfx{position:fixed;inset:0;display:grid;place-items:center;pointer-events:none;z-index:50}
.stampfx span{font-family:var(--head);font-weight:900;font-size:46px;letter-spacing:.12em;color:var(--red);border:5px solid var(--red);padding:2px 22px 6px;mix-blend-mode:multiply;opacity:0;transform:rotate(-12deg) scale(1.8);animation:stamp 1.1s ease-out forwards}
@keyframes stamp{18%{opacity:.92;transform:rotate(-12deg) scale(1)}75%{opacity:.92;transform:rotate(-12deg) scale(1)}100%{opacity:0;transform:rotate(-12deg) scale(1)}}
@media (prefers-reduced-motion:reduce){.tape-run{animation:none}.stampfx span{animation:none;opacity:.9;transform:rotate(-12deg)}}

.slip .tab{border:1px solid var(--ink);min-width:48px}
.slip .grid2 b.up{color:var(--ink)}
@media (max-width:599px){.dateline .dl-tag{display:none}}

/* ===== Edition 2: more newsprint, real paper tickets ===== */
:root{--black:'UnifrakturMaguntia','Old English Text MT',serif;--type:'Courier Prime','Courier New',Courier,monospace;--manila:#EEDFB9;--manila-2:#E4D2A4}

/* Masthead: nameplate with ears */
header.masthead{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;padding:16px 14px 8px;border-bottom:0;position:relative}
header.masthead::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:7px;border-top:3px solid var(--ink);border-bottom:1px solid var(--ink)}
.ear{font-family:var(--display);font-size:10px;line-height:1.3;color:var(--ink-2);text-transform:uppercase;letter-spacing:.06em;border:1px solid var(--ink);padding:4px 6px;justify-self:start;text-align:center}
.ear.r{justify-self:end}
.ear b{font-weight:700;color:var(--ink)}
.ear .pill{border:0;padding:0;font-size:10px;background:none;color:var(--red)}
.ear .pill.live{background:none;color:var(--red)}
.logo{justify-content:center;gap:0;font-family:var(--black);font-weight:400;font-size:42px;letter-spacing:0;line-height:1}
.logo .np{font-family:var(--black);font-weight:400}
.logo .eye{width:.5em;height:.5em;margin:0 .02em;border-width:2px;vertical-align:middle}
.logo .eye i{width:.24em;height:.24em}
.dateline{margin-top:7px;justify-content:space-between;border-bottom:1px solid var(--ink);padding:5px 16px;font-size:10px}
@media (max-width:420px){.ear{font-size:8.5px;padding:3px 4px}.logo{font-size:34px}}
@media (min-width:900px){header.masthead{padding:24px 4px 10px}.logo{font-size:76px}.ear{font-size:11px;padding:6px 10px}.ear .pill{font-size:11px}}

/* Section heads: thick-thin rules with a centered label */
.sect-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;border-top:3px solid var(--ink);border-bottom:1px solid var(--ink);padding:5px 0 4px}
.sect-h span{font-family:var(--head);font-weight:900;font-size:15px;letter-spacing:.18em;text-transform:uppercase}
.sect-h span::before,.sect-h span::after{content:" \2726 ";color:var(--red);font-size:11px}
.sect-h em{font-family:var(--display);font-style:italic;font-size:14px;color:var(--ink-2)}

/* Front-page lead story */
.lead{display:flex;flex-direction:column;gap:8px;text-align:center;padding-bottom:12px;border-bottom:1px solid var(--ink)}
.kicker{font-family:var(--head);font-weight:900;font-style:italic;font-size:15px;color:var(--red);letter-spacing:.14em;text-transform:uppercase}
.lead .hero-h,.sb-hero .lead .hero-h{font-size:50px;line-height:.95;letter-spacing:-.025em;text-wrap:balance}
.deck{font-family:var(--display);font-style:italic;font-size:19px;line-height:1.35;color:var(--ink);max-width:30ch;margin:0 auto}
.byline{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-2);border-top:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft);padding:5px 0;margin:2px 0}
.byline span{color:var(--muted)}
.lede{text-align:left;font-size:17px;line-height:1.55;color:var(--ink);hyphens:auto}
.dropcap{float:left;font-family:var(--head);font-weight:900;font-size:62px;line-height:.8;padding:6px 8px 0 0;color:var(--ink)}
.sb-hero p.deck{font-size:19px}
@media (min-width:900px){.lead .hero-h,.sb-hero .lead .hero-h{font-size:96px}.deck{font-size:24px;max-width:36ch}.lede{columns:2;column-gap:36px;column-rule:1px solid var(--rule-soft);font-size:18px}}

/* Clip-out coupon */
.coupon{background:var(--paper-2);border:2px dashed var(--ink);position:relative;padding-top:20px}
.coupon .scissors{position:absolute;top:-13px;left:14px;background:var(--paper);padding:0 4px;font-size:18px;line-height:1}
.coupon-h{font-family:var(--head);font-weight:900;font-size:24px;font-style:italic;text-align:center;border-bottom:1px solid var(--ink);padding-bottom:6px}

/* Tote board */
.card.jp{gap:6px}
.card.jp .sect-h{justify-content:center;border-top:0;padding-top:0}
.jp-amt{text-shadow:1px 0 0 rgba(196,35,26,.35),-1px 0 0 rgba(23,20,15,.12)}

/* ===== Pari-mutuel tickets ===== */
.slip,.ticket{background-color:var(--manila);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .35 0 0 0 0 .15 0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"),linear-gradient(180deg,rgba(255,255,255,.25),rgba(0,0,0,.03));
  font-family:var(--type);padding:26px 18px 18px 30px;filter:drop-shadow(0 2px 2px rgba(23,20,15,.28))}
/* tear-off stub line on the left */
.slip::before,.ticket::before{content:"";position:absolute;left:14px;top:14px;bottom:14px;border-left:2px dotted rgba(23,20,15,.55)}
.slip h2{font-family:var(--type);font-weight:700;font-size:22px;letter-spacing:.08em;text-transform:uppercase;border:0;padding:0}
.tk-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;border-bottom:2px solid var(--ink);padding-bottom:8px}
.tk-house{font-family:var(--type);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.tk-kind{font-family:var(--type);font-weight:700;font-size:15px;text-transform:uppercase;letter-spacing:.04em;margin-top:2px}
.tk-serial{font-family:var(--type);font-weight:700;color:var(--red);font-size:16px;text-align:right;letter-spacing:.06em;line-height:1.2}
.tk-serial small{display:block;font-weight:400;font-size:10.5px;color:var(--ink-2);letter-spacing:.08em}
.tk-meta{display:flex;justify-content:space-between;font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2);border-bottom:1px dashed var(--ink);padding-bottom:6px}
.slip > .row-between:first-child{border:0;padding:0}
.slip .trow{border-bottom:1px dashed rgba(23,20,15,.35);padding:7px 0;background:transparent}
.slip .trow .handle{font-family:var(--type)!important;font-weight:700;font-size:14px!important}
.slip .trow .info{background:transparent;border:1px solid var(--ink);font-family:var(--type)}
.slip .note,.slip .eyebrow,.ticket .note{font-family:var(--type);font-variant:normal;text-transform:none;letter-spacing:0;color:var(--ink-2)}
.slip .eyebrow{text-transform:uppercase;font-size:11px;letter-spacing:.1em}
.slip .grid2{border-top:2px solid var(--ink);padding-top:8px}
.slip .grid2 b{font-family:var(--type);font-weight:700}
.slip .search{background:rgba(255,255,255,.35);border:1px solid var(--ink);font-family:var(--type);font-weight:700}
.slip .tab{background:transparent;font-family:var(--type);font-weight:700}
.slip .tab.on{background:var(--ink);color:var(--manila)}
.slip .tabs{border-color:var(--ink)}
.tk-btn{font-family:var(--type);font-weight:700;letter-spacing:.12em;border:2px solid var(--ink);box-shadow:inset 0 0 0 2px var(--manila),inset 0 0 0 3px var(--ink)}
.tk-btn[disabled]{box-shadow:none;border:1px dashed var(--ink-2);color:var(--ink-2)}
.tk-foot{display:flex;flex-direction:column;align-items:center;gap:6px;border-top:1px dashed var(--ink);padding-top:10px;margin-top:2px}
.tk-foot p{font-family:var(--type);font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2);text-align:center;margin:0}
.barcode{width:70%;height:30px;background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 3px,var(--ink) 3px 4px,transparent 4px 7px,var(--ink) 7px 10px,transparent 10px 11px,var(--ink) 11px 12px,transparent 12px 15px,var(--ink) 15px 16px,transparent 16px 18px);opacity:.85}
/* punch hole */
.slip .tk-head::before,.ticket .tk-head::before{content:"";position:absolute;top:9px;right:50%;width:10px;height:10px;border-radius:50%;background:var(--paper);box-shadow:inset 0 1px 2px rgba(0,0,0,.35)}

/* placed tickets: typewritten, slightly askew like they were tossed on a desk */
.ticket{gap:6px}
.ticket .tk-odds{font-family:var(--type);font-weight:700;font-size:14px;text-transform:uppercase}
.ticket .row-between span{font-family:var(--type);font-size:13.5px}
.ticket b.mono{font-family:var(--type)}
.cards .ticket:nth-child(3n+1){transform:rotate(-.7deg)}
.cards .ticket:nth-child(3n+2){transform:rotate(.5deg)}
.cards .ticket:nth-child(3n){transform:rotate(-.25deg)}
.ticket[data-status]::after{font-family:var(--head);top:40%;font-size:34px;border-width:4px;border-style:double;border-radius:6px}
@media (prefers-reduced-motion:reduce){.cards .ticket{transform:none!important}}

/* Toast reads like a telegram strip */
.toast{background:var(--manila);font-family:var(--type);font-weight:700;text-transform:uppercase;letter-spacing:.04em;border:1px solid var(--ink);box-shadow:0 2px 0 rgba(23,20,15,.25)}

/* Form rows: leader dots between the runner and the price */
.leg .tmain{position:relative}
.leg .odds{padding-left:8px}
.sb-hero p.lede,.lede{font-style:normal}
.lead{border-bottom:0;padding-bottom:0}
@media (max-width:599px){.byline span{display:none}}
.ticket[data-status="open"] .chip{color:var(--ink)!important;border-color:var(--ink)!important}
@media (min-width:900px){.sb-hero p.deck{font-size:24px;max-width:38ch}.lede{columns:auto;max-width:62ch;margin:0 auto;font-size:19px}.coupon{max-width:560px;width:100%;align-self:center}}

/* Runner names set in the ticket's typewriter face, not body serif */
.handle,.leg .handle{font-family:var(--type);font-weight:700;letter-spacing:-.01em}
.leg .handle{font-size:15.5px}

/* Market Report: static stock-table box (replaces the scrolling ticker) */
.market{display:flex;flex-direction:column;gap:8px}
.mr-cols{display:grid;grid-template-columns:1fr 1fr;gap:0}
.mr-cols>div{padding:0 10px}
.mr-cols>div:first-child{padding-left:0;border-right:1px solid var(--ink)}
.mr-cols>div:last-child{padding-right:0}
.mr-h{font-family:var(--head);font-weight:900;font-style:italic;font-size:17px;border-bottom:2px solid var(--ink);padding-bottom:2px;margin-bottom:2px}
table.mr{width:100%;border-collapse:collapse;font-family:var(--type);font-size:12.5px}
table.mr th{font-family:var(--mono);font-weight:600;font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);text-align:left;padding:3px 0;border-bottom:1px solid var(--ink)}
table.mr td{padding:5px 0;border-bottom:1px dotted var(--ink-2);font-weight:700;max-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
table.mr td:first-child{width:52%}
table.mr .n{text-align:right;padding-left:6px}
table.mr tbody tr{cursor:pointer}
table.mr tbody tr:hover td{background:var(--hi)}
@media (max-width:420px){.mr-cols{grid-template-columns:1fr}.mr-cols>div{padding:0!important;border:0!important}.mr-cols>div+div{margin-top:12px}}