/* Layout: mirrors westendlottery.com. Cream page, white cards, centred animated dot mark on the homepage,
   small inline mark in the top bar. Single light theme by design, as on the live site. */
:root{
  --cobalt:#4169FF; --cobalt-dark:#2D52E0; --blue:#0018FC; --yellow:#F0CC00; --red:#FC0000; --orange:#FF5C00;
  --green:#18C018; --purple:#9C48FC; --sky:#48C0FC; --pink:#E478F0; --lavender:#849CE4;
  --ink:#0A0A0A; --ink-mid:#2A2A2A; --ink-light:#6B6B6B;
  --cream:#F5F2EE; --cream-dark:#E8E4DE; --white:#FFFFFF;
  --sans:'DM Sans', -apple-system, "Segoe UI", sans-serif;
  --mono:'Space Mono', ui-monospace, Menlo, monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);background:var(--cream);color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--blue)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px}
.wrap{max-width:960px;margin:0 auto;padding-inline:22px}

/* Dot mark */
.grid{display:inline-grid;grid-template-columns:repeat(3,var(--step));gap:var(--gap)}
.grid .cell{position:relative;width:var(--d);height:var(--d);display:inline-block}
.grid .sh,.grid .fg{position:absolute;width:var(--d);height:var(--d);border-radius:50%}
.grid .sh{top:var(--off);left:var(--off);transition:background .35s ease}
.grid .fg{top:0;left:0;transition:background .35s ease,transform .4s cubic-bezier(.45,1.6,.4,1)}
.grid.hero{--d:22px;--step:32px;--gap:14px;--off:3px}
.grid.bar{--d:9px;--step:12px;--gap:3px;--off:1.5px}
.grid.foot{--d:8px;--step:12px;--gap:5px;--off:1.5px;opacity:.7}
.wordmark{font-family:var(--mono);font-weight:700;color:var(--ink);letter-spacing:.01em;line-height:1.2;margin:0}
.ld{display:inline-block;width:.62em;height:.62em;border-radius:50%;vertical-align:-.03em;margin:0 .005em;background:var(--blue);box-shadow:.07em .07em 0 var(--yellow)}
@keyframes wel-wave{0%{transform:translateY(0)}50%{transform:translateY(-7px)}100%{transform:translateY(0)}}
@keyframes wel-wave-quiet{0%{transform:translateY(0)}50%{transform:translateY(-2px)}100%{transform:translateY(0)}}

/* Top bar */
.bar{border-bottom:1px solid var(--cream-dark);background:var(--cream)}
.bar .wrap{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;justify-content:space-between;padding-block:16px}
.mark{display:flex;align-items:center;gap:12px;text-decoration:none}
.mark .wordmark{font-size:17px}
.nav{display:flex;flex-wrap:wrap;gap:6px 20px;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.nav a{color:var(--ink-light);text-decoration:none}
.nav a[aria-current="page"],.nav a:hover{color:var(--ink)}
main.wrap{padding-block:44px 56px}

/* Homepage hero */
.hero-mark{text-align:center;display:grid;justify-items:center;gap:22px}
.hero-mark .wordmark{font-size:22px}
.hero-mark .wordmark > span{display:block}
.hero-title{font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mid);text-align:center;margin:30px 0 0}
.hero-copy{text-align:center;max-width:560px;margin:10px auto 0;font-size:16px;line-height:1.7;color:var(--ink-mid)}

/* Type */
.label{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--cobalt)}
.label.orange{color:var(--orange)}
h1{font-family:var(--mono);font-weight:700;font-size:clamp(26px,4.6vw,40px);line-height:1.15;letter-spacing:-.01em;margin:10px 0 12px;text-wrap:balance}
h2{font-family:var(--sans);font-weight:600;font-size:19px;line-height:1.3;margin:0;text-wrap:balance}
h3{font-family:var(--sans);font-weight:600;font-size:16px;margin:0 0 6px}
.lede{max-width:62ch;color:var(--ink-mid);font-size:16px;line-height:1.7;margin:0}
.meta{font-size:13px;color:var(--ink-light)}
.small{font-size:13px;color:var(--ink-light)}
.crumb{font-family:var(--mono);font-size:12px;margin:0 0 6px}
.crumb a{color:var(--ink-light)}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-light);display:flex;flex-wrap:wrap;gap:4px 18px}
.eyebrow b{color:var(--ink)}

/* Buttons */
.btn{display:inline-block;font-family:var(--mono);font-size:14px;font-weight:700;line-height:1;color:var(--white);background:var(--blue);border:2px solid var(--blue);border-radius:12px;padding:13px 18px;text-decoration:none;white-space:nowrap;cursor:pointer;box-shadow:4px 4px 0 var(--yellow);transition:transform .15s ease,box-shadow .15s ease}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--red)}
.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--yellow)}
.btn:disabled{opacity:.65;cursor:not-allowed;transform:none;box-shadow:4px 4px 0 var(--yellow)}
.btn.sm{font-size:13px;padding:10px 14px;border-radius:10px;box-shadow:3px 3px 0 var(--yellow)}
.btn.sm:hover{box-shadow:5px 5px 0 var(--red)}
.btn.ghost{background:var(--white);color:var(--blue)}
.wave-word span{display:inline-block;transition:color .5s ease,transform .5s cubic-bezier(.45,1.6,.4,1)}

/* Our-lottery promo on the homepage */
.promo{background:var(--white);border:2px solid var(--cobalt);border-radius:16px;padding:28px;margin:36px auto 0;max-width:620px;display:grid;gap:12px;transition:border-color .3s ease,box-shadow .3s ease,transform .3s ease}
.promo:hover{border-color:var(--red);box-shadow:0 6px 28px rgba(252,0,0,.12);transform:translateY(-2px)}
.promo > p{margin:0;font-size:17px;font-weight:600;line-height:1.45}
.promo .btn{justify-self:start;margin-top:4px}
.board{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 24px;margin-top:16px;padding-top:18px;border-top:1px dashed var(--cream-dark);align-items:start}
.top5{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px;min-width:0}
.top5 li{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:10px;align-items:center;font-size:14px}
.top5 .rank{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;font-family:var(--mono);font-size:11px;font-weight:700;color:var(--white)}
.top5 li:nth-child(1) .rank{background:var(--blue);box-shadow:2px 2px 0 var(--yellow)}
.top5 li:nth-child(2) .rank{background:var(--red);box-shadow:2px 2px 0 var(--sky)}
.top5 li:nth-child(3) .rank{background:var(--green);box-shadow:2px 2px 0 var(--pink)}
.top5 li:nth-child(4) .rank{background:var(--purple);box-shadow:2px 2px 0 var(--yellow)}
.top5 li:nth-child(5) .rank{background:var(--orange);box-shadow:2px 2px 0 var(--lavender)}
.top5 a{color:var(--ink);text-decoration:none;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top5 a:hover{color:var(--blue)}
.top5 .votes{font-family:var(--mono);font-size:12px;color:var(--ink-light);font-variant-numeric:tabular-nums}
.top5-empty{font-size:14px;color:var(--ink-light);margin:8px 0 0}
.example{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:rgba(240,204,0,.3);color:#6B5600;padding:2px 6px;border-radius:4px;margin-left:6px;vertical-align:1px}
.clock{text-align:right}
.clock .digits{display:flex;gap:6px;justify-content:flex-end;margin-top:8px}
.clock .unit{display:grid;justify-items:center;gap:2px;min-width:44px;padding:8px 6px;border-radius:10px;background:var(--cream)}
.clock .unit b{font-family:var(--mono);font-size:22px;line-height:1;font-variant-numeric:tabular-nums}
.clock .unit span{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-light)}
.clock .when-draw{font-size:12px;color:var(--ink-light);margin:8px 0 0}

/* Filters */
.controls{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--cream);padding-block:14px;margin-top:44px;border-bottom:1px solid var(--cream-dark);display:grid;gap:10px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-family:var(--mono);font-size:12px;font-weight:700;line-height:1;padding:9px 13px;border-radius:999px;border:1.5px solid var(--cream-dark);background:var(--white);color:var(--ink);cursor:pointer;transition:border-color .15s ease}
.chip:hover{border-color:var(--cobalt)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--white);border-color:var(--ink)}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.search,.field input[type="email"]{flex:1 1 220px;min-width:0;font-family:var(--sans);font-size:15px;padding:13px 15px;border-radius:10px;border:1.5px solid var(--cream-dark);background:var(--cream);color:var(--ink);transition:border-color .15s ease}
.search{background:var(--white)}
.search:focus,.field input[type="email"]:focus{outline:none;border-color:var(--cobalt)}
.count{font-family:var(--mono);font-size:12px;color:var(--ink-light)}
.note{font-size:13px;color:var(--ink-light);margin:14px 0 0}

/* Show cards */
.list{display:grid;gap:14px;margin-top:18px}
.show{background:var(--white);border:1.5px solid var(--cream-dark);border-radius:16px;padding:20px 22px;display:grid;gap:14px;transition:border-color .2s ease}
.show:hover{border-color:var(--cobalt)}
.show-head{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;justify-content:space-between}
.show-head > div{min-width:0}
.show h2 a{color:var(--ink);text-decoration:none}
.show h2 a:hover{color:var(--blue)}
.cat{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-light)}
.scheme{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 18px;padding-top:14px;border-top:1px dashed var(--cream-dark)}
.show-head + .scheme,.show > .scheme:first-child{border-top:0;padding-top:0}
.s-main{min-width:0;display:grid;gap:6px}
.s-line{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.kind{font-family:var(--mono);font-size:10.5px;font-weight:700;line-height:1;letter-spacing:.1em;text-transform:uppercase;padding:5px 8px;border-radius:6px;color:var(--white);background:var(--ink)}
.scheme[data-kind="lottery"] .kind{background:var(--blue)}
.scheme[data-kind="rush"] .kind{background:var(--orange)}
.scheme[data-kind="day_seats"] .kind{background:#0E8F0E}
.scheme[data-kind="standing"] .kind{background:var(--purple)}
.scheme[data-kind="other"] .kind{background:var(--pink);color:var(--ink)}
.price{font-family:var(--mono);font-weight:700;font-size:20px;line-height:1;font-variant-numeric:tabular-nums}
.platform{font-size:13px;color:var(--ink-light)}
.when{font-family:var(--mono);font-size:12px;color:var(--ink-mid)}
.details{font-size:14px;color:var(--ink-mid);margin:0;max-width:70ch;line-height:1.55}
.s-side{display:grid;gap:10px;justify-items:end;align-content:start;text-align:right}
.timer{font-family:var(--mono);font-weight:700;font-size:12px;padding:7px 10px;border-radius:8px;white-space:nowrap;font-variant-numeric:tabular-nums}
.timer.live{background:rgba(24,192,24,.13);color:#0B7A0B}
.timer.soon{background:rgba(240,204,0,.22);color:#7A6200}
.timer.off{background:var(--cream);color:var(--ink-light);font-weight:400}
.none{font-size:14px;color:var(--ink-light);margin:0}
.empty{padding:40px 0;color:var(--ink-light);text-align:center}

/* Show page */
.summary{font-size:16px;line-height:1.7;max-width:64ch;margin:0;color:var(--ink-mid)}
.section{margin-top:44px;display:grid;gap:14px}
.faq{display:grid;gap:18px;max-width:70ch}
.faq p{margin:0;color:var(--ink-mid)}
.others{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:6px 18px;font-size:14px;padding:0;margin:0;list-style:none}
.others a{color:var(--ink);text-decoration:none}
.others a:hover{color:var(--blue)}
.others span{color:var(--ink-light);font-family:var(--mono);font-size:12px}

/* Sign-up block, as on the live site */
.signup{background:var(--white);border:2px solid var(--cobalt);border-radius:16px;padding:32px 30px;display:grid;gap:14px;max-width:560px;transition:border-color .3s ease,box-shadow .3s ease,transform .3s ease}
.signup:hover{border-color:var(--red);box-shadow:0 6px 28px rgba(252,0,0,.12);transform:translateY(-2px)}
.signup p{margin:0}
.signup h2{font-size:18px}
.field{display:grid;gap:12px}
.field .btn{width:100%;padding:16px 24px;font-size:15px;box-shadow:5px 5px 0 var(--yellow)}
.field .btn:hover{box-shadow:7px 7px 0 var(--red)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--ink-mid)}
.check input{margin-top:3px;accent-color:var(--blue)}
.picker{display:flex;flex-wrap:wrap;gap:8px;max-height:280px;overflow:auto;padding:2px}
.picker label{font-size:13px;border:1.5px solid var(--cream-dark);border-radius:999px;padding:7px 12px;display:flex;gap:6px;align-items:center;cursor:pointer;background:var(--cream)}
.picker input{accent-color:var(--blue)}
.picker label:has(input:checked){border-color:var(--blue);background:rgba(65,105,255,.1)}
.pick-count{font-family:var(--mono);font-size:11px;color:var(--cobalt)}
.form-msg{font-size:14px;min-height:1.5em;margin:0;border-radius:8px}
.form-msg.good{padding:12px 14px;background:rgba(65,105,255,.08);color:var(--cobalt-dark)}
.form-msg.bad{color:var(--red)}
.form-msg.note{padding:12px 14px;background:rgba(240,204,0,.18);color:#6B5600}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Producer block */
.producer{border-top:1px solid var(--cream-dark);padding-top:32px;margin-top:56px;max-width:620px}
.producer h2{margin:12px 0}
.producer p{font-size:15px;line-height:1.65;color:var(--ink-mid);margin:0 0 16px}
.producer-link{display:inline-block;font-family:var(--mono);font-size:14px;font-weight:700;color:var(--orange);text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:1px;user-select:all}

/* Our lottery page */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;padding:0;margin:0;list-style:none;counter-reset:s}
.steps li{background:var(--white);border:1.5px solid var(--cream-dark);border-radius:16px;padding:20px;counter-increment:s}
.steps li::before{content:counter(s);display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--blue);box-shadow:3px 3px 0 var(--yellow);color:var(--white);font-family:var(--mono);font-weight:700;margin-bottom:12px}
.steps li:nth-child(2)::before{background:var(--red);box-shadow:3px 3px 0 var(--sky)}
.steps li:nth-child(3)::before{background:#0E8F0E;box-shadow:3px 3px 0 var(--pink)}
.steps p{margin:0;color:var(--ink-mid);font-size:14px}

/* Legal */
.prose{max-width:68ch}
.prose h2{margin:32px 0 8px;font-size:17px}
.prose p,.prose li{color:var(--ink-mid);line-height:1.65}
.prose ol,.prose ul{padding-left:22px}
.fill{background:rgba(240,204,0,.3);padding:0 4px;border-radius:3px}

/* Footer */
footer.foot{border-top:1px solid var(--cream-dark);margin-top:40px}
footer.foot .wrap{padding-block:40px 48px;display:grid;justify-items:center;gap:14px;text-align:center}
footer.foot nav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
footer.foot nav a{color:var(--ink-light);text-decoration:none}
footer.foot nav a:hover{color:var(--ink)}
.foot-text{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--ink-light);line-height:1.8;max-width:64ch;margin:0}

@media (max-width:600px){
  .wrap{padding-inline:18px}
  .scheme{grid-template-columns:minmax(0,1fr)}
  .s-side{justify-items:start;text-align:left;grid-auto-flow:column;justify-content:start;align-items:center}
  .signup{padding:26px 20px}
  .promo{padding:22px 20px}
  .board{grid-template-columns:minmax(0,1fr)}
  .clock{text-align:left}
  .clock .digits{justify-content:flex-start}
  .mark .wordmark{font-size:15px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
h1 em{font-style:normal;color:var(--blue)}
.promo .board:first-of-type{margin-top:6px}
/* Show dots: same colours and offset shadow as the voting page */
.sdot{position:relative;display:inline-block;flex-shrink:0;width:var(--s);height:var(--s);margin-right:10px;vertical-align:-.1em}
.sdot span{position:absolute;width:var(--s);height:var(--s);border-radius:50%}
.sdot span:first-child{top:var(--o);left:var(--o)}
.sdot span:last-child{top:0;left:0}
.sdot.md{--s:16px;--o:2px}
.sdot.sm{--s:11px;--o:1.5px;margin-right:8px}
.sdot.lg{--s:30px;--o:4px;margin-right:14px}
.show h2{display:flex;align-items:center}
h1.with-dot{display:flex;align-items:center}
.others li{display:flex;align-items:center}
.top5 li{grid-template-columns:22px 16px minmax(0,1fr) auto}
.top5 .sdot{margin-right:0}
.top5 .rank,.top5 li:nth-child(n) .rank{background:none!important;box-shadow:none!important;color:var(--ink-light);width:auto;font-size:12px}
.top5 li{grid-template-columns:14px 16px minmax(0,1fr) auto}
.official{margin-top:56px;display:grid;gap:8px;max-width:640px}
.official h2{font-size:20px}
.promo > p{font-weight:400}
.promo > p b{font-weight:600}
.hero-copy{margin-top:26px}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:4px 8px;border-radius:999px;background:var(--ink);color:var(--white)}
.tag + .tag{background:var(--white);color:var(--ink);border:1.5px solid var(--ink);padding:2.5px 7px}
#invite .signup{margin-inline:auto;max-width:620px;width:100%}
/* "Email me when details are published" */
.notify{margin-top:4px}
.notify summary{cursor:pointer;font-family:var(--mono);font-size:12px;font-weight:700;color:var(--blue);list-style:none;display:inline-flex;gap:6px;align-items:center}
.notify summary::-webkit-details-marker{display:none}
.notify summary::before{content:"+";display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--blue);color:var(--white);font-size:12px;line-height:1}
.notify[open] summary::before{content:"–"}
.signup.notify-form{border:0;padding:12px 0 0;background:none;max-width:460px;gap:10px;box-shadow:none;transform:none}
.signup.notify-form:hover{border:0;box-shadow:none;transform:none}
.notify-form .field{grid-template-columns:minmax(0,1fr) auto;display:grid}
.notify-form .field .btn{width:auto;padding:11px 14px;font-size:13px;box-shadow:3px 3px 0 var(--yellow)}
.notify-form .check{font-size:12.5px}
.none-wrap{display:grid;gap:6px}
@media (max-width:600px){.notify-form .field{grid-template-columns:minmax(0,1fr)}}
.official h1.official-h{font-family:var(--sans);font-weight:600;font-size:20px;line-height:1.3;letter-spacing:0;margin:0}