/* /deck: the "What Do You Want?" card deck page. To change the page's fonts, change the two --deck-head and --deck-body lines. */
.deck-page {
  --deck-head: oswald, "Helvetica Neue", Arial, sans-serif;
  --deck-body: "Open Sans", "Helvetica Neue", Arial, sans-serif;
  --bg: #0a0a0f;
  --surface: #16161f;
  --text: #fff;
  --muted: #c4c4d0;
  --ink: #0a0a0f;
  --wants: #2457f5;
  --gifts: #e8503a;
  --experiences: #f2a516;
  --twists: #1fa67a;
  --jokers: #7a3fe0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--deck-body);
  font-weight: 400;
}
.s-wants { --suit: var(--wants); --on: #fff; --glyph: "\2660\FE0E"; }
.s-gifts { --suit: var(--gifts); --on: var(--ink); --glyph: "\2665\FE0E"; }
.s-experiences { --suit: var(--experiences); --on: var(--ink); --glyph: "\2666\FE0E"; }
.s-twists { --suit: var(--twists); --on: var(--ink); --glyph: "\2663\FE0E"; }

.deck [hidden] { display: none !important; }
.deck { overflow: hidden; font-size: 17px; line-height: 1.6; }
.deck-wrap { position: relative; max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.deck-section { padding: 56px 0; }
.deck h1, .deck h2, .deck h3 { font-family: var(--deck-head); font-weight: 700; text-transform: uppercase; color: inherit; margin: 0; }
.deck h2 { font-size: 34px; line-height: 1.15; margin-bottom: 24px; }
.deck h2::after { content: ""; display: block; width: 72px; height: 6px; margin-top: 12px; background: var(--bar, var(--wants)); border-radius: 3px; }
.deck p { margin: 0 0 16px; }
.deck-prose { max-width: 44rem; font-size: 19px; }

/* The "?" logo, bleeding off the right edge of whatever holds it. */
.deck-hero, .deck-suit, .deck-card, .deck-callout { isolation: isolate; }
.deck-mark::before { content: "?"; }
.deck-mark { position: absolute; top: 50%; right: -.08em; transform: translateY(-50%); font-family: var(--deck-head); font-weight: 700; font-size: 190px; line-height: 1; color: var(--suit); opacity: .22; pointer-events: none; user-select: none; z-index: -1; }

.deck-btn { display: inline-block; min-height: 52px; padding: 13px 32px; border: 0; border-radius: 999px; background: var(--jokers); color: #fff; font-family: var(--deck-body); font-size: 18px; font-weight: 700; line-height: 26px; text-align: center; text-decoration: none; cursor: pointer; }
.deck-btn:hover, .deck-btn:focus { color: #fff; text-decoration: none; filter: brightness(1.15); }
.deck a:focus-visible, .deck button:focus-visible, .deck-card:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* Hero */
.deck-hero { position: relative; overflow: hidden; padding: 28px 0 40px; }
.deck-hero > .deck-mark { --suit: var(--wants); font-size: 520px; right: -.1em; opacity: .28; }
.deck h1 { font-size: min(10.2vw, 72px); line-height: 1.05; white-space: nowrap; }
.deck-sub { margin: 8px 0 20px !important; font-size: 16px; line-height: 1.35; }
/* Four suits, each with its own Draw. Both faces share one grid cell; a draw writes the hidden face and turns the card over. */
.deck-piles { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; }
.deck-pile { display: flex; flex-direction: column; gap: 10px; }
.deck-flip { flex: 1; perspective: 1000px; }
.deck-flip-inner { display: grid; height: 100%; min-height: 236px; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.3, .7, .3, 1); }
.deck-face { grid-area: 1 / 1; position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; padding: 12px; border-radius: 14px; background: var(--suit); color: var(--on); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.deck-face-b { transform: rotateY(180deg); }
.deck-face-label { font-size: 12px; font-weight: 800; line-height: 1.25; }
.deck-face-label::before { content: var(--glyph) " "; }
.deck-face-text { margin: 10px 0 8px; font-size: 15px; font-weight: 800; line-height: 1.27; }
.deck-face-num { margin-top: auto; font-size: 12px; font-weight: 700; }
.deck-face .deck-mark { color: var(--on); opacity: .14; font-size: 150px; }
.deck-face.is-back .deck-face-label { font-family: var(--deck-head); font-size: 21px; font-weight: 700; line-height: 1.15; text-transform: uppercase; }
.deck-face.is-back .deck-mark { font-size: 210px; }
.deck-pile-draw { width: 100%; min-height: 46px; padding: 10px 12px; background: var(--suit); color: var(--on); font-size: 16px; }
.deck-pile-draw:hover, .deck-pile-draw:focus { color: var(--on); }

/* The four suits */
.deck-suits { display: grid; grid-template-columns: 1fr; gap: 16px; }
.deck-suit { position: relative; overflow: hidden; padding: 24px 22px; border-radius: 18px; background: var(--suit); color: var(--on); }
.deck-suit h3 { position: relative; font-size: 25px; line-height: 1.15; margin-bottom: 10px; }
.deck-suit h3::before { content: var(--glyph) " "; }
.deck-suit p { position: relative; margin: 0; font-weight: 600; }
.deck-suit .deck-mark { color: var(--on); opacity: .13; font-size: 170px; }
.deck-suits-note { margin: 24px 0 0 !important; font-family: var(--deck-head); font-size: 26px; font-weight: 700; text-transform: uppercase; }

/* All 52: the filter is radio buttons and CSS, so it works with JavaScript off. */
.deck-radio { position: absolute; width: 1px; height: 1px; opacity: 0; }
.deck-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.deck-filter [for="f-all"] { --suit: #fff; --on: var(--ink); }
.deck-filter label { margin: 0; padding: 9px 18px; border: 2px solid var(--suit); border-radius: 999px; color: #fff; font-size: 15px; font-weight: 700; line-height: 22px; cursor: pointer; }
#f-all:checked ~ .deck-filter [for="f-all"],
#f-wants:checked ~ .deck-filter [for="f-wants"],
#f-gifts:checked ~ .deck-filter [for="f-gifts"],
#f-experiences:checked ~ .deck-filter [for="f-experiences"],
#f-twists:checked ~ .deck-filter [for="f-twists"] { background: var(--suit); color: var(--on); }
#f-all:focus-visible ~ .deck-filter [for="f-all"],
#f-wants:focus-visible ~ .deck-filter [for="f-wants"],
#f-gifts:focus-visible ~ .deck-filter [for="f-gifts"],
#f-experiences:focus-visible ~ .deck-filter [for="f-experiences"],
#f-twists:focus-visible ~ .deck-filter [for="f-twists"] { outline: 3px solid #fff; outline-offset: 3px; }
#f-wants:checked ~ .deck-grid .deck-item:not(.s-wants),
#f-gifts:checked ~ .deck-grid .deck-item:not(.s-gifts),
#f-experiences:checked ~ .deck-grid .deck-item:not(.s-experiences),
#f-twists:checked ~ .deck-grid .deck-item:not(.s-twists) { display: none; }
.deck-hint { color: var(--muted); font-size: 15px; }
.deck-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 0; padding: 0; list-style: none; }
.deck-item { display: flex; margin: 0; padding: 0; }
.deck-card { position: relative; overflow: hidden; flex: 1; min-height: 190px; padding: 18px 18px 22px; border-radius: 16px; border-top: 5px solid var(--suit); background: var(--surface); }
.deck-card[role="button"] { cursor: pointer; }
.deck-pill { position: relative; display: inline-block; padding: 3px 11px; border-radius: 999px; background: var(--suit); color: var(--on); font-size: 13px; font-weight: 700; line-height: 20px; }
.deck-pill::before { content: var(--glyph) " "; }
.deck-num { position: absolute; top: 20px; right: 18px; font-size: 14px; font-weight: 600; color: var(--muted); }
.deck-text { position: relative; margin: 18px 0 0 !important; font-size: 20px; font-weight: 700; line-height: 1.35; }
.deck-card .deck-mark { font-size: 160px; }
.deck-text em, .deck-face-text em { font-style: italic; }
.deck-copied { position: absolute; right: 14px; bottom: 14px; padding: 4px 12px; border-radius: 999px; background: #fff; color: var(--ink); font-size: 14px; font-weight: 700; line-height: 20px; }

/* Why I made this */
.deck-why a { color: #fff; font-weight: 700; text-decoration: underline; }
.deck-why a:hover { color: #fff; }

/* Time to WOW! */
.deck-callout { --suit: var(--gifts); position: relative; overflow: hidden; padding: 32px 22px; border-radius: 22px; background: var(--gifts); color: var(--ink); }
.deck-callout h2 { position: relative; }
.deck-callout h2::after { display: none; }
.deck-callout p { position: relative; max-width: 40rem; font-size: 19px; font-weight: 600; }
.deck-callout .deck-mark { color: var(--ink); opacity: .1; font-size: 280px; }
.deck-callout .deck-btn { position: relative; margin-top: 6px; background: var(--ink); color: #fff; }
.deck-callout .deck-btn:hover, .deck-callout .deck-btn:focus { color: #fff; filter: none; background: #2a2a35; }

.deck-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 420px) {
  .deck-hero > .deck-mark { opacity: .22; font-size: 460px; }
  .deck-callout .deck-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .deck-flip-inner { transition: none; }
}
@media (min-width: 360px) {
  .deck-flip-inner { min-height: 212px; }
}
@media (min-width: 640px) {
  .deck-sub { font-size: 20px; }
  .deck { font-size: 18px; }
  .deck-section { padding: 72px 0; }
  .deck h2 { font-size: 42px; }
  .deck-grid { grid-template-columns: 1fr 1fr; gap: 18px; }
  .deck-flip-inner { min-height: 228px; }
  .deck-face { padding: 18px; }
  .deck-face-label { font-size: 14px; }
  .deck-face-text { font-size: 20px; margin-top: 14px; }
  .deck-face-num { font-size: 14px; }
  .deck-face.is-back .deck-face-label { font-size: 28px; }
  .deck-callout { padding: 48px 44px; }
  .deck-callout .deck-mark { font-size: 420px; }
}
@media (min-width: 980px) {
  .deck-hero { padding: 48px 0 64px; }
  .deck-piles { grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .deck-flip-inner { min-height: 300px; }
  .deck-hero > .deck-mark { font-size: 760px; }
  .deck-sub { font-size: 24px; }
  .deck-suits { grid-template-columns: repeat(4, 1fr); }
  .deck-grid { grid-template-columns: repeat(3, 1fr); }
}