:root{
  --ink:#24352f;
  --cream:#fff9ec;
  --paper:#fffdf7;
  --tomato:#ef6a4b;
  --tomato-dark:#c8472f;
  --sage:#b9d5b0;
  --yellow:#ffd66b;
  color:var(--ink);
  background:
    radial-gradient(circle at 8% 9%,#ffd66b55 0 7rem,transparent 7.1rem),
    radial-gradient(circle at 94% 24%,#b9d5b066 0 10rem,transparent 10.1rem),
    var(--cream);
}

body{min-height:100vh;color:var(--ink)}
header{
  margin:18px auto 0;
  padding:10px 20px;
  max-width:1120px;
  border:2px solid var(--ink);
  border-radius:22px;
  background:#fffdf7dd;
  box-shadow:5px 5px 0 var(--ink);
}
.brand-formal{font-family:system-ui,-apple-system,sans-serif;font-size:18px;font-weight:850;letter-spacing:.08em}
.brand-playful{font-size:34px;color:var(--tomato);text-shadow:1px 1px 0 #fff}
.brand-subtitle{font-size:9px;letter-spacing:.14em;color:#52655d}
.brand-logo{display:block;width:400px;max-width:100%;height:auto}
nav{gap:8px}
nav a,nav .link{padding:8px 13px;border-radius:999px;color:var(--ink);text-decoration:none;font-weight:750}
nav a:hover,nav .link:hover{background:var(--yellow);filter:none}

main{max-width:1120px;padding-top:42px}
.ribbon{display:inline-block;margin-bottom:28px;padding:7px 13px;border:2px solid var(--ink);border-radius:999px;background:var(--sage);color:var(--ink);letter-spacing:.12em}
.queue-hero{position:relative;padding:26px 0 44px;max-width:920px}
.queue-hero:after{content:"✦";position:absolute;right:4%;top:10px;font-size:74px;line-height:1;color:var(--tomato);transform:rotate(12deg)}
h1,h2,h3{font-family:system-ui,-apple-system,sans-serif}
.queue-hero h1{max-width:780px;font-size:clamp(58px,8vw,98px);font-weight:900;line-height:.93;letter-spacing:-.065em}
.queue-hero h1 em{font:inherit;color:var(--tomato);letter-spacing:inherit}
.queue-hero h2{font-size:clamp(28px,4vw,42px);font-weight:850;letter-spacing:-.035em}
.lead{color:#52655d}
.pass-position{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:0 26px;max-width:560px;margin:26px 0 14px;padding:20px 26px;border:2px solid var(--ink);border-radius:24px;background:var(--yellow);box-shadow:6px 6px 0 var(--ink)}
.pass-position span{font-size:.82rem;font-weight:850;letter-spacing:.1em;text-transform:uppercase}
.pass-position strong{grid-row:1 / span 2;font-family:system-ui,-apple-system,sans-serif;font-size:clamp(4rem,10vw,6.5rem);font-weight:950;line-height:.82;letter-spacing:-.09em;color:var(--tomato)}
.pass-position p{margin:4px 0 0;font-size:1rem;font-weight:700;color:var(--ink)}

.card{border:2px solid var(--ink);border-radius:24px;background:var(--paper);box-shadow:7px 7px 0 var(--ink)}
.queue-card{overflow:hidden}
.queue-heading{padding:26px 30px;border-color:var(--ink);background:var(--sage)}
.queue-heading h2{font-weight:900;letter-spacing:-.035em}
.button,button{border:2px solid var(--ink);border-radius:999px;background:var(--tomato);color:white;box-shadow:3px 3px 0 var(--ink);font-weight:800;transition:transform .15s ease,box-shadow .15s ease}
.button:hover,button:hover{filter:none;transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.secondary{background:var(--yellow);color:var(--ink);border-color:var(--ink)}
.public-queue li{padding:18px 30px;border-color:#24352f33}
.public-queue li:before,.number{display:grid;place-items:center;min-width:46px;height:46px;border:2px solid var(--ink);border-radius:50%;background:var(--yellow);color:var(--ink);font-family:system-ui,-apple-system,sans-serif;font-size:16px;font-weight:900}
.queue-position{display:flex;align-items:center;gap:8px}.queue-arrows{display:flex;gap:5px}.queue-arrows form{margin:0}.queue-icon{display:grid;place-items:center;width:38px;min-width:38px;height:38px;padding:0;font-size:21px;line-height:1;background:var(--yellow);color:var(--ink);box-shadow:2px 2px 0 var(--ink)}.queue-remove{background:transparent;color:var(--ink);font-size:27px}.queue-person{min-width:150px;flex:1}
.public-queue li:nth-child(even):before{background:var(--sage)}
.public-queue li span{font-family:system-ui,-apple-system,sans-serif;font-size:20px;font-weight:800}
.empty-queue>span{display:inline-grid;place-items:center;width:64px;height:64px;border:2px solid var(--ink);border-radius:50%;background:var(--yellow);color:var(--ink);font-family:system-ui,-apple-system,sans-serif;font-weight:900}
.queue-cta{margin-top:22px;padding:24px 28px;border:2px dashed var(--ink);border-radius:20px;background:#ffd66b66}
.queue-cta p{font-family:system-ui,-apple-system,sans-serif;font-weight:850}

input,textarea,fieldset{border:2px solid #24352f55;border-radius:14px}
input:focus,textarea:focus{border-color:var(--tomato);outline:3px solid #ef6a4b33}
.pill{background:var(--yellow);color:var(--ink);font-weight:850}
.stats{overflow:hidden;border:2px solid var(--ink);border-radius:22px;background:var(--paper);box-shadow:5px 5px 0 var(--ink)}
.stats>div+div{border-left:2px solid var(--ink)}
.stats strong{font-family:system-ui,-apple-system,sans-serif;font-weight:900;color:var(--tomato)}
.eyebrow{color:var(--tomato-dark)}
footer{margin:34px auto 0;max-width:1120px;border-top:2px solid var(--ink);color:#52655d}

@media(max-width:720px){
  header{margin:12px 12px 0;padding:12px;border-radius:18px}
  .brand-logo{width:270px}
  nav{gap:2px}
  nav a,nav .link{padding:7px 9px}
  main{padding-top:28px}
  .queue-hero:after{display:none}
  .queue-hero h1{font-size:clamp(50px,16vw,72px)}
  .pass-position{gap:0 18px;padding:18px 20px}
  .queue-heading{padding:22px}
  .stats>div+div{border-left:0}
  footer{margin-inline:18px}
}