:root {
  --page: #eef1f4;
  --ink: #14213d;
  --muted: #56627a;
  --rule: #c9d1dc;
  --ticket: #ffd23f;
  --ticket-ink: #14213d;
  --ticket-edge: #e8b923;
  --serif: Charter, "Bitstream Charter", "Iowan Old Style", "Sitka Text", Cambria, Georgia, serif;
  --narrow: "Avenir Next Condensed", "Roboto Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --page: #0f1724; --ink: #e6ebf2; --muted: #9aa6b8; --rule: #2a3547; --ticket-edge: #c9a01c; }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--page); color: var(--ink);
  font: 18px/1.65 var(--serif);
}
main { max-width: 36rem; margin: 0 auto; padding: 56px 20px 40px; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:focus-visible { outline: 3px solid var(--ticket-edge); outline-offset: 3px; border-radius: 2px; }

/* The one loud thing: a coat-check ticket with a tear-off stub */
.ticket {
  display: flex; width: min(100%, 25rem); margin: 0 0 48px;
  color: var(--ticket-ink); text-decoration: none;
  transform: rotate(-2.5deg); transform-origin: left center;
  filter: drop-shadow(0 10px 18px rgba(20, 33, 61, .18));
}
.ticket-body, .ticket-stub {
  background: var(--ticket);
  /* notches where the ticket was torn from the roll */
  -webkit-mask: radial-gradient(circle at 0 50%, transparent 11px, #000 12px) left / 51% 100% no-repeat,
                radial-gradient(circle at 100% 50%, transparent 11px, #000 12px) right / 51% 100% no-repeat;
          mask: radial-gradient(circle at 0 50%, transparent 11px, #000 12px) left / 51% 100% no-repeat,
                radial-gradient(circle at 100% 50%, transparent 11px, #000 12px) right / 51% 100% no-repeat;
}
.ticket-body { flex: 1; padding: 22px 22px 18px 30px; border-radius: 6px 0 0 6px; }
.ticket-stub {
  width: 5.2rem; padding: 18px 0; border-radius: 0 6px 6px 0;
  border-left: 2px dashed rgba(20, 33, 61, .45);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-family: var(--narrow); font-weight: 700;
}
.ticket-name {
  margin: 0; font-family: var(--narrow); font-weight: 800; font-stretch: condensed;
  font-size: clamp(3rem, 15vw, 4.4rem); line-height: .9; letter-spacing: -.01em;
}
.ticket-line { margin: 10px 0 0; font-family: var(--narrow); font-size: 1rem; font-weight: 600; }
.stub-no { font-size: .8rem; }
.stub-num { font-size: 1.9rem; line-height: 1; font-variant-numeric: tabular-nums; }

h1 { font-size: 1.9rem; line-height: 1.2; font-weight: 700; margin: 0 0 14px; letter-spacing: -.01em; }
h2 { font-size: 1.2rem; line-height: 1.3; margin: 40px 0 8px; }
p { margin: 0 0 14px; }
.lead { font-size: 1.15rem; color: var(--muted); margin-bottom: 36px; }

ol.how { list-style: none; counter-reset: step; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
ol.how li {
  counter-increment: step; display: grid; grid-template-columns: 2.4rem 1fr; gap: 4px 10px;
  padding: 16px 0; border-bottom: 1px solid var(--rule);
}
ol.how li::before {
  content: counter(step); grid-row: span 2;
  font-family: var(--narrow); font-weight: 800; font-size: 1.5rem; line-height: 1.1;
}
ol.how b, ol.how span { grid-column: 2; }
ol.how span { color: var(--muted); }

.status { margin-top: 36px; padding-left: 14px; border-left: 4px solid var(--ticket-edge); }

ul.plain { padding-left: 1.2rem; margin: 0 0 14px; }
ul.plain li { margin: 6px 0; }

footer {
  max-width: 36rem; margin: 0 auto; padding: 20px 20px 48px;
  display: flex; gap: 20px; color: var(--muted); font-size: .95rem;
}

@media (prefers-reduced-motion: no-preference) {
  .ticket { animation: issue .7s cubic-bezier(.2, .8, .2, 1) both; }
  @keyframes issue {
    from { opacity: 0; transform: translateY(-18px) rotate(-7deg); }
    to { opacity: 1; transform: rotate(-2.5deg); }
  }
}
@media (max-width: 420px) {
  body { font-size: 17px; }
  main { padding-top: 36px; }
  h1 { font-size: 1.6rem; }
}