/* John Cena Classic at Walt Disney World, December 14, 2026 (Desk scoop, card 1141).
   Scoped under .jcc on the site.css tokens. The signature element is a ringside event
   ticket. Confirmed facts print solid on the ticket, open items print as blanks still
   waiting for their stamp, and the tear off stub carries the four parks' crowd outlook
   for the same day. */

.jcc {
  --jcc-card: oklch(95% 0.025 85);
  --jcc-card-ink: oklch(24% 0.03 60);
  --jcc-card-soft: oklch(44% 0.03 60);
  --jcc-red: oklch(54% 0.19 27);
  --jcc-green: oklch(52% 0.12 150);
  --jcc-amber: oklch(62% 0.14 70);
  max-width: 1160px;
  margin: 0 auto;
  padding: var(--space-md) 20px var(--space-3xl);
}
.jcc :where(a) { color: var(--gold); text-decoration: none; border-bottom: 1px solid oklch(84% 0.13 86 / 0.35); }
.jcc :where(a:hover) { border-bottom-color: var(--gold); }
.jcc :where(a:focus-visible) { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 3px; }
.jcc-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.jcc-hero { padding-top: var(--space-sm); }
.jcc-kicker { margin: 0; font-family: var(--text); font-size: 14px; font-weight: 600; color: var(--gold); }
.jcc-h1 {
  margin: var(--space-md) 0 0; max-width: 21ch;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(36px, 5.2vw, 64px); line-height: 1.03; letter-spacing: -0.025em;
  color: var(--ink); text-wrap: balance;
}
.jcc-h1 span { color: var(--gold); }
.jcc-answer { margin: var(--space-lg) 0 0; max-width: 62ch; font-family: var(--text); font-size: clamp(17px, 1.6vw, 19px); line-height: 1.65; color: var(--ink-soft); }
.jcc-answer b { color: var(--ink); }
.jcc-byline { margin: var(--space-md) 0 0; font-size: 14px; color: var(--muted); }

/* The ticket */
.jcc-ticket-wrap { margin-top: clamp(28px, 4vw, 48px); }
.jcc-ticket {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  max-width: 980px;
  background: var(--jcc-card); color: var(--jcc-card-ink);
  border-radius: 14px;
  box-shadow: 0 18px 40px oklch(0% 0 0 / 0.35);
  transform: rotate(-0.6deg);
}
.jcc-ticket-main { padding: 26px 28px 22px; border-right: 2px dashed oklch(60% 0.03 60 / 0.55); position: relative; }
/* punched notches where the stub tears off */
.jcc-ticket-main::before, .jcc-ticket-main::after {
  content: ""; position: absolute; right: -13px; width: 24px; height: 24px; border-radius: 50%; background: var(--paper);
}
.jcc-ticket-main::before { top: -12px; }
.jcc-ticket-main::after { bottom: -12px; }

.jcc-admit { margin: 0; font-family: var(--text); font-size: 12.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--jcc-red); }
.jcc .jcc-ticket-title {
  margin: 4px 0 14px; font-family: var(--display); font-weight: 800;
  font-size: clamp(30px, 4vw, 44px); line-height: 1; letter-spacing: -0.02em; color: var(--jcc-card-ink);
}
.jcc-ticket-title span { color: var(--jcc-red); }

.jcc-lines { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
.jcc-lines > div { padding: 9px 0; border-top: 1px solid oklch(40% 0.03 60 / 0.18); }
.jcc-lines dt { font-family: var(--text); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--jcc-card-soft); }
.jcc-lines dd { margin: 2px 0 0; font-family: var(--display); font-size: 17px; font-weight: 700; color: var(--jcc-card-ink); }
.jcc-lines .is-open dd {
  display: inline-block; padding: 1px 8px; border: 1.5px dashed var(--jcc-amber); border-radius: 6px;
  color: oklch(46% 0.12 65); font-weight: 600; font-size: 15.5px;
}
.jcc .jcc-ticket-note { margin: 14px 0 0; font-family: var(--text); font-size: 13px; color: var(--jcc-card-soft); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.jcc-key { display: inline-block; width: 14px; height: 10px; border-radius: 3px; }
.jcc-key.is-known { background: var(--jcc-card-ink); }
.jcc-key.is-open { border: 1.5px dashed var(--jcc-amber); margin-left: 10px; }

.jcc-stub { padding: 26px 22px 20px; display: flex; flex-direction: column; }
.jcc .jcc-stub-h { margin: 0 0 8px; font-family: var(--text); font-size: 12.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--jcc-card-soft); }
.jcc-parks { list-style: none; margin: 0; padding: 0; display: grid; }
.jcc-parks li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid oklch(40% 0.03 60 / 0.18); }
.jcc-parks a { display: grid; border: 0; color: var(--jcc-card-ink); min-width: 0; }
.jcc-parks a:hover .jcc-park-name { text-decoration: underline; text-underline-offset: 3px; }
.jcc-park-name { font-family: var(--display); font-size: 17px; font-weight: 700; }
.jcc-park-hours { font-family: var(--text); font-size: 13px; color: var(--jcc-card-soft); }
.jcc-score { display: grid; justify-items: end; text-align: right; flex-shrink: 0; }
.jcc-score b {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  font-family: var(--display); font-size: 18px; font-weight: 800; color: var(--jcc-card);
  background: var(--jcc-card-soft);
}
.jcc-score[data-level="low"] b { background: var(--jcc-green); }
.jcc-score[data-level="mid"] b { background: var(--jcc-amber); }
.jcc-score[data-level="high"] b { background: var(--jcc-red); }
.jcc-score[data-level="none"] b { background: transparent; color: var(--jcc-card-soft); border: 1.5px dashed var(--jcc-card-soft); }
.jcc-score i { font-style: normal; font-family: var(--text); font-size: 12px; color: var(--jcc-card-soft); margin-top: 2px; }
.jcc .jcc-stub-foot { margin: auto 0 0; padding-top: 10px; font-family: var(--text); font-size: 12px; color: var(--jcc-card-soft); }

/* Body */
.jcc-panel { margin-top: clamp(36px, 5vw, 60px); }
.jcc h2 { font-family: var(--display); font-size: clamp(26px, 3.4vw, 38px); line-height: 1.1; color: var(--ink); margin: 0 0 var(--space-md); text-wrap: balance; }
.jcc h3 { font-family: var(--display); font-size: 20px; color: var(--ink); margin: var(--space-lg) 0 6px; }
.jcc-panel p, .jcc-panel li { font-family: var(--text); font-size: 16px; line-height: 1.65; color: var(--ink-soft); max-width: 66ch; }
.jcc-panel b { color: var(--ink); }
.jcc-tips { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.jcc-tips li { padding-left: 16px; border-left: 2px solid var(--gold); }
.jcc-links { display: grid; gap: 6px; padding-left: 20px; margin-top: var(--space-lg); }

@media (max-width: 720px) {
  .jcc-ticket { grid-template-columns: 1fr; transform: none; }
  .jcc-ticket-main { border-right: 0; border-bottom: 2px dashed oklch(60% 0.03 60 / 0.55); padding: 22px 20px 18px; }
  .jcc-ticket-main::before, .jcc-ticket-main::after { top: auto; bottom: -13px; right: auto; }
  .jcc-ticket-main::before { left: -12px; }
  .jcc-ticket-main::after { right: -12px; }
  .jcc-lines { grid-template-columns: 1fr; }
  .jcc-stub { padding: 20px; }
}
@media (prefers-reduced-motion: no-preference) {
  .jcc-ticket { transition: transform 0.3s ease; }
  .jcc-ticket:hover { transform: rotate(0deg); }
}