/* Man of Many Studio: Baby Names. Cot-card world on the studio night ground. */
:root {
  --ground: #0c0d10;
  --ground-2: #14161a;
  --ground-3: #1c1f24;
  --ink: #ece9e2;
  --ink-2: #b4b0a8;
  --gold: #c8a96a;
  --gold-ink: #1a1408;
  --stock: #f3efe6;
  --stock-ink: #1b1c1f;
  --stock-label: #5d5a54;
  --line: rgba(236, 233, 226, 0.12);
  /* decade bands: the decade a name peaked */
  --d1950: #2f7f7a; --d1960: #c98f1f; --d1970: #c4572a; --d1980: #b8336a;
  --d1990: #3a5bd0; --d2000: #4f8f3a; --d2010: #7a4fc4; --d2020: #e0604a;
  --r-card: 18px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --pad: clamp(20px, 5vw, 72px);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font: 400 17px/1.55 Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
h1, h2, h3 { font-family: Fraunces, Georgia, serif; font-weight: 500; margin: 0; line-height: 1.08; text-wrap: balance; }
em { font-style: italic; font-weight: 400; color: var(--gold); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* bar */
.bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between;
  padding: 14px var(--pad); background: rgba(12, 13, 16, 0.86); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.bar__logo img { width: 150px; height: auto; }
.bar__right { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--ink-2); }
.demo-pill { border: 1px solid var(--gold); color: var(--gold); border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 500; }
.presented__slot { display: inline-block; margin-left: 6px; padding: 3px 12px; border: 1px dashed var(--ink-2); border-radius: 999px; color: var(--ink); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px;
  border-radius: 999px; font: 600 15px/1 Inter, sans-serif; text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: transform .2s var(--ease-out), background-color .2s, color .2s, border-color .2s; }
.btn:active { transform: scale(0.97); }
.btn--gold { background: var(--gold); color: var(--gold-ink); }
.btn--gold:hover { background: #d8bb7f; }
.btn--ghost { background: transparent; color: var(--ink); border-color: rgba(236,233,226,.32); }
.btn--ghost:hover { border-color: var(--ink); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

.kicker { margin: 0 0 18px; font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }

/* hero */
.hero { min-height: calc(100dvh - 60px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center;
  gap: clamp(32px, 5vw, 80px); padding: clamp(32px, 6vh, 72px) var(--pad); }
.hero h1 { font-size: clamp(44px, 6.4vw, 92px); line-height: 1.02; letter-spacing: -0.025em; font-weight: 300; }
.hero h1 em { display: inline-block; padding-bottom: .08em; }
.lede { margin: 22px 0 30px; max-width: 34ch; font-size: clamp(17px, 1.4vw, 20px); color: var(--ink-2); }
.search { position: relative; display: flex; gap: 8px; max-width: 520px; padding: 6px; border-radius: 999px; background: var(--ground-2); border: 1px solid var(--line); }
.search input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--ink); font: 500 17px Inter, sans-serif; padding: 0 16px; }
.search input::placeholder { color: #8f8b84; }
.search input:focus { outline: none; }
.search:focus-within { border-color: var(--gold); }
.search__list { position: absolute; top: calc(100% + 8px); left: 0; right: 0; margin: 0; padding: 6px; list-style: none; z-index: 30;
  background: var(--ground-3); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 18px 40px rgba(0,0,0,.45); max-height: 300px; overflow: auto; }
.search__list li { display: flex; justify-content: space-between; padding: 10px 14px; border-radius: 12px; cursor: pointer; }
.search__list li span { color: var(--ink-2); font-size: 14px; }
.search__list li[aria-selected="true"], .search__list li:hover { background: rgba(200,169,106,.16); }
.tune-link { margin-top: 14px; }

/* deck */
.deck-wrap { display: flex; flex-direction: column; align-items: center; }
.deck { position: relative; width: min(380px, 86vw); aspect-ratio: 3 / 4; touch-action: pan-y; user-select: none; }
.cot { position: absolute; inset: 0; border-radius: var(--r-card); background: var(--stock); color: var(--stock-ink); overflow: hidden;
  box-shadow: 0 2px 4px rgba(0,0,0,.25), 0 24px 48px -12px rgba(0,0,0,.6); display: flex; flex-direction: column;
  transition: transform .45s var(--ease-out), opacity .35s; will-change: transform; }
.cot.is-top { cursor: grab; }
.cot.is-dragging { transition: none; cursor: grabbing; }
.cot__band { --band: var(--d2020); background: var(--band); color: #fff; padding: 14px 20px; display: flex; justify-content: space-between;
  font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.cot__body { flex: 1; padding: 18px 22px 20px; display: flex; flex-direction: column; }
.cot__label { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--stock-label); }
.cot__name { font-family: Fraunces, Georgia, serif; font-weight: 500; font-size: clamp(44px, 11vw, 64px); line-height: 1; letter-spacing: -0.02em;
  margin: 6px 0 4px; overflow-wrap: anywhere; }
.cot__tag { align-self: flex-start; margin-top: 6px; font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: rgba(27,28,31,.08); }
.cot__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin: 16px 0 0; border-top: 1px dashed rgba(27,28,31,.25); padding-top: 14px; }
.cot__fields div { min-width: 0; }
.cot__fields dt { font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--stock-label); }
.cot__fields dd { margin: 2px 0 0; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cot__chart { margin-top: auto; padding-top: 12px; }
.cot__chart svg { width: 100%; height: auto; overflow: visible; display: block; }
.cot__chart .axis { font: 600 9.5px Inter, sans-serif; fill: var(--stock-label); }
.cot__stamp { position: absolute; top: 70px; padding: 6px 14px; border: 3px solid; border-radius: 10px; font: 700 22px Inter, sans-serif;
  letter-spacing: .1em; text-transform: uppercase; opacity: 0; transform: rotate(-12deg); pointer-events: none; }
.cot__stamp--keep { left: 18px; color: #2f7f4a; }
.cot__stamp--pass { right: 18px; color: #b33a2a; transform: rotate(12deg); }
.cot--sponsor .cot__band { background: var(--stock-ink); }
.cot__sponsorline { font-family: Fraunces, Georgia, serif; font-size: 30px; line-height: 1.12; margin: 12px 0; }
.cot__fine { margin-top: auto; font-size: 12px; color: var(--stock-label); }
.cot--static { position: relative; aspect-ratio: 3 / 4; width: min(340px, 80vw); transform: rotate(3deg); }
.deck__empty { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 14px; padding: 24px;
  border: 1px dashed rgba(236,233,226,.3); border-radius: var(--r-card); color: var(--ink-2); }
.deck__controls { display: flex; align-items: center; gap: 18px; margin-top: 26px; }
.round { width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--line); background: var(--ground-2); color: var(--ink);
  display: grid; place-items: center; cursor: pointer; transition: transform .2s var(--ease-out), background-color .2s, border-color .2s; }
.round svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.round--story:hover { transform: translateY(-2px); }
.round:active { transform: scale(.94); }
.round--keep { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); }
.round--keep svg { fill: currentColor; stroke: none; }
.round--pass:hover { border-color: #e36b5a; color: #f08a7a; }
.round--story { width: auto; height: 46px; border-radius: 999px; padding: 0 20px; font: 600 14px Inter, sans-serif; }


/* tune (quiz) */
.tune { padding: clamp(64px, 10vh, 120px) var(--pad); background: var(--ground-2); border-block: 1px solid var(--line); }
.tune__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px 40px; margin-bottom: 40px; }
.tune__head h2 { font-size: clamp(34px, 4.4vw, 60px); font-weight: 300; letter-spacing: -0.02em; }
.tune__head p { margin: 0; color: var(--ink-2); }
.tune__count { font-family: Fraunces, Georgia, serif; font-size: 1.6em; color: var(--gold); font-variant-numeric: tabular-nums; }
.tune__qs { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; counter-reset: q; }
.tune__qs li { display: grid; grid-template-columns: 220px 1fr; gap: 20px; align-items: start; padding-top: 24px; border-top: 1px solid var(--line); }
.tune__qs h3 { font-size: 24px; font-weight: 400; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips button { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(236,233,226,.28); background: transparent;
  color: var(--ink); font: 500 15px Inter, sans-serif; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.chips button:hover { border-color: var(--ink); }
.chips button[aria-pressed="true"] { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.chips--letters button { min-width: 44px; padding: 0 10px; }
.chips button[disabled] { opacity: .3; cursor: not-allowed; }
.tune__foot { display: flex; gap: 12px; margin-top: 40px; flex-wrap: wrap; }

/* story */
.story { padding: clamp(64px, 10vh, 120px) var(--pad); }
.story__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 32px; }
.story__sex { margin: 0 0 8px; font-size: 13px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.story__name { font-size: clamp(64px, 12vw, 160px); line-height: .92; font-weight: 300; letter-spacing: -0.035em; }
.story__verdict { margin: 18px 0 0; max-width: 46ch; font-size: clamp(17px, 1.5vw, 21px); color: var(--ink-2); }
.compare { min-width: min(100%, 360px); }
.compare label { display: block; font-size: 14px; color: var(--ink-2); margin-bottom: 8px; }
.compare__row { display: flex; gap: 8px; }
.compare__row input { flex: 1; min-width: 0; min-height: 46px; border-radius: 999px; border: 1px solid var(--line); background: var(--ground-2);
  color: var(--ink); font: 500 16px Inter, sans-serif; padding: 0 18px; }
.compare__row input:focus { outline: none; border-color: var(--gold); }
.compare__msg { min-height: 1.4em; margin: 8px 0 0; font-size: 14px; color: var(--ink-2); }
.chart { margin: 48px 0 0; }
.chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart .grid line { stroke: var(--line); }
.chart .grid text { font: 500 12px Inter, sans-serif; fill: #8f8b84; }
.chart .line { fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.chart .line--b { stroke-dasharray: 2 7; stroke-width: 3; }
.chart .peak circle { stroke: var(--ground); stroke-width: 3; }
.chart .peak text { font: 600 14px Inter, sans-serif; fill: var(--ink); paint-order: stroke; stroke: var(--ground); stroke-width: 6px; stroke-linejoin: round; }
.chart .legend text { font: 600 13px Inter, sans-serif; }
.chart__cap { margin-top: 12px; font-size: 13px; color: #8f8b84; max-width: 70ch; }
.chart .draw { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: draw 1.6s var(--ease-out) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 40px 0 0; border-top: 1px solid var(--line); }
.facts div { padding: 20px 20px 0 0; }
.facts dt { font-size: 13px; color: var(--ink-2); }
.facts dd { margin: 6px 0 0; font-family: Fraunces, Georgia, serif; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.1; font-variant-numeric: tabular-nums; }
.facts dd small { display: block; font-family: Inter, sans-serif; font-size: 13px; color: var(--ink-2); margin-top: 4px; }
.story__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
.twins { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px; }
.twins p { width: 100%; margin: 0 0 4px; color: var(--ink-2); font-size: 15px; }
.twins button { min-height: 40px; padding: 0 16px; border-radius: 999px; border: 0; background: var(--ground-3); color: var(--ink);
  font: 500 15px Inter, sans-serif; cursor: pointer; }
.twins button:hover { background: rgba(200,169,106,.22); }

/* shortlist */
.shortlist { padding: clamp(64px, 10vh, 120px) var(--pad); background: var(--stock); color: var(--stock-ink); }
.shortlist__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px 40px; }
.shortlist__head h2 { font-size: clamp(34px, 4.4vw, 60px); font-weight: 300; letter-spacing: -0.02em; }
.shortlist__head p { margin: 0; color: var(--stock-label); max-width: 44ch; }
.tray { list-style: none; margin: 36px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; min-height: 8px; }
.tray li { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 18px; border-radius: 999px; background: #fff;
  box-shadow: 0 1px 2px rgba(27,28,31,.08), 0 6px 16px -6px rgba(27,28,31,.18); animation: pop .5s var(--ease-out); }
.tray li .dot { width: 10px; height: 10px; border-radius: 50%; }
.tray li b { font-family: Fraunces, Georgia, serif; font-weight: 500; font-size: 22px; cursor: pointer; }
.tray li button { width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(27,28,31,.07); cursor: pointer; color: var(--stock-ink); font-size: 16px; line-height: 1; }
@keyframes pop { from { transform: translateY(14px) scale(.9); opacity: 0; } }
.shortlist__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 32px; }
.shortlist .btn--ghost { color: var(--stock-ink); border-color: rgba(27,28,31,.3); }
.shortlist .btn--ghost:hover { border-color: var(--stock-ink); }
.shortlist .btn--gold { background: var(--stock-ink); color: var(--stock); }
.sl-msg { margin: 0; font-size: 14px; color: var(--stock-label); }

/* brands */
.brands { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 6vw, 96px); align-items: center; padding: clamp(72px, 12vh, 140px) var(--pad); }
.brands h2 { font-size: clamp(34px, 4.4vw, 60px); font-weight: 300; letter-spacing: -0.02em; margin-bottom: 18px; }
.brands__copy > p { color: var(--ink-2); max-width: 48ch; }
.touch { margin: 28px 0 36px; padding: 0; list-style: none; display: grid; gap: 14px; max-width: 52ch; }
.touch li { padding-left: 22px; position: relative; color: var(--ink-2); }
.touch li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.touch b { color: var(--ink); font-weight: 600; }
.brands__demo { display: grid; place-items: center; }

/* daddies */
.daddies { display: grid; grid-template-columns: 280px 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; margin: 0 var(--pad) clamp(64px, 10vh, 120px);
  padding: clamp(24px, 3vw, 40px); border-radius: var(--r-card); background: var(--ground-2); border: 1px solid var(--line); }
.daddies img { border-radius: 12px; width: 100%; height: auto; }
.daddies h2 { font-size: clamp(30px, 3.4vw, 46px); font-weight: 400; letter-spacing: -0.015em; }
.daddies p { color: var(--ink-2); max-width: 48ch; }
.daddies__links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

/* footer */
.foot { padding: 48px var(--pad) 64px; border-top: 1px solid var(--line); color: #8f8b84; font-size: 13px; }
.foot img { width: 120px; height: auto; margin-bottom: 18px; opacity: .8; }
.foot p { max-width: 80ch; margin: 0 0 10px; }
.foot b { color: var(--ink-2); }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; z-index: 50;
  background: var(--ink); color: var(--ground); padding: 12px 20px; border-radius: 999px; font-weight: 600; font-size: 14px;
  width: max-content; max-width: calc(100vw - 40px); text-align: center;
  transition: opacity .3s, transform .4s var(--ease-out); }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; min-height: auto; padding-top: 28px; }
  .hero__copy { order: 1; }
  .deck-wrap { order: 2; }
  .lede { margin-bottom: 22px; }
  .tune__qs li { grid-template-columns: 1fr; gap: 12px; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brands { grid-template-columns: 1fr; }
  .daddies { grid-template-columns: 1fr; }
  .daddies img { max-width: 220px; }
  .bar__right .presented { display: none; }
}
@media (max-width: 480px) {
  .search { flex-direction: column; border-radius: 22px; }
  .search input { min-height: 46px; }
  .bar__logo img { width: 120px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .chart .draw { stroke-dashoffset: 0; }
}
.linkish { background: none; border: 0; padding: 0; color: var(--ink-2); font: inherit; letter-spacing: inherit; text-transform: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.linkish:hover { color: var(--ink); }

.tray .ghost { background: transparent; box-shadow: none; border: 1.5px dashed rgba(27,28,31,.28); color: var(--stock-label); padding: 12px 22px; animation: none; }
.tray .ghost b { font-size: 20px; cursor: default; color: rgba(27,28,31,.35); }

/* fanned pile + swipe feedback */
.cot.is-behind { pointer-events: none; }
.cot.is-behind .cot__body { filter: saturate(.7); }
.deck__hand { position: absolute; z-index: 20; left: 50%; bottom: 22%; width: 64px; height: 64px; margin-left: -32px;
  fill: var(--ink); stroke: var(--ground); stroke-width: 2.5; stroke-linejoin: round; pointer-events: none;
  opacity: 0; transition: opacity .35s; filter: drop-shadow(0 6px 10px rgba(0,0,0,.45)); }
.deck__hand.is-on { opacity: 1; }
.deck__touch { fill: rgba(200,169,106,.45); stroke: none; transform-origin: 27px 12px; animation: touch 1.3s var(--ease-out) infinite; }
@keyframes touch { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.ctl { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ctl__lbl { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #8f8b84; transition: color .15s; }
.ctl__lbl--keep { color: color-mix(in srgb, var(--gold) calc(var(--on, 0) * 100%), #8f8b84); }
.ctl__lbl--pass { color: color-mix(in srgb, #f08a7a calc(var(--on, 0) * 100%), #8f8b84); }
.round--keep, .round--pass { transform: scale(calc(1 + var(--on, 0) * .2)); transition: transform .12s ease-out, background-color .12s, border-color .12s, box-shadow .12s; }
.round--keep { box-shadow: 0 6px 18px -4px rgba(200,169,106, calc(var(--on, 0) * .8)); background: color-mix(in srgb, #ecd29a calc(var(--on, 0) * 100%), var(--gold)); }
.round--pass { background: color-mix(in srgb, #c4473a calc(var(--on, 0) * 100%), var(--ground-2)); border-color: color-mix(in srgb, #e36b5a calc(var(--on, 0) * 100%), var(--line)); box-shadow: 0 6px 18px -4px rgba(196,71,58, calc(var(--on, 0) * .8)); }
.deck__controls { align-items: flex-start; margin-top: 44px; }
.deck__how { margin: 22px 0 0; font-size: 13px; color: #8f8b84; text-align: center; }
.deck__how kbd { display: inline-grid; place-items: center; min-width: 26px; height: 24px; padding: 0 6px; margin: 0 1px; border: 1px solid var(--line);
  border-bottom-width: 2px; border-radius: 6px; background: var(--ground-2); color: var(--ink); font: 600 13px Inter, sans-serif; vertical-align: middle; }
.deck__how--touch { display: none; }
@media (hover: none) and (pointer: coarse) { .deck__how--keys { display: none; } .deck__how--touch { display: inline; } }

/* handwritten swipe cue */
:root { --pink: #ff4f8b; --keep-green: #3fd27a; --pass-red: #ff4d4d; }
.swipe-note { margin: 0 0 30px; font-family: Caveat, 'Comic Sans MS', cursive; font-weight: 700; font-size: clamp(34px, 3.4vw, 44px); line-height: 1;
  color: var(--pink); transform: rotate(-4deg); text-align: center; text-shadow: 0 2px 0 rgba(0,0,0,.35); }
.swipe-note span { display: inline-block; font-size: .8em; animation: beat 1.4s ease-in-out infinite; }
@keyframes beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.25); } 30% { transform: scale(1); } 45% { transform: scale(1.15); } }
/* arrows sit in their own grid gutters either side of the deck, so they can never run
   off the column or under the fanned pile (the old absolute offsets did both at 1366px) */
.deck-stage { --aw: clamp(56px, 6vw, 86px); position: relative; display: grid; width: 100%;
  max-width: calc(380px + 2 * var(--aw) + 2 * clamp(10px, 1.2vw, 18px));
  grid-template-columns: var(--aw) minmax(0, 380px) var(--aw); column-gap: clamp(10px, 1.2vw, 18px); justify-content: center; align-items: start; }
.deck-stage .deck { grid-column: 2; grid-row: 1; width: 100%; }
/* below 380px wide a 3:4 card is too short for its fields and chart; grow it instead of clipping */
.deck { min-height: 496px; }
.swipe-arrow { grid-row: 1; margin-top: 30%; width: 100%; display: flex; flex-direction: column; align-items: center; pointer-events: none; color: var(--pink); z-index: 1; }
.swipe-arrow--left { grid-column: 1; color: var(--pass-red); }
.swipe-arrow--right { grid-column: 3; color: var(--keep-green); }
.swipe-arrow--right .swipe-arrow__svg { transform: scaleX(-1); }
.swipe-arrow__svg { width: 100%; height: auto; overflow: visible; }
.swipe-arrow__line, .swipe-arrow__head { fill: none; stroke: currentColor; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.swipe-arrow__line { stroke-dasharray: 160; stroke-dashoffset: 160; animation: scribble .9s .5s ease-out forwards; }
.swipe-arrow__head { stroke-dasharray: 40; stroke-dashoffset: 40; animation: scribble .3s 1.3s ease-out forwards; }
@keyframes scribble { to { stroke-dashoffset: 0; } }
.swipe-arrow span { margin-top: -6px; font-family: Caveat, 'Comic Sans MS', cursive; font-weight: 700; font-size: 32px; line-height: 1; opacity: 0; animation: fadein .4s 1.4s forwards; }
.swipe-arrow--left span { transform: rotate(-8deg); }
.swipe-arrow--right span { transform: rotate(8deg); }
@keyframes fadein { to { opacity: 1; } }
.swipe-arrow--left { animation: nudge-l 2.4s 2s ease-in-out infinite; }
.swipe-arrow--right { animation: nudge-r 2.4s 2s ease-in-out infinite; }
@keyframes nudge-l { 0%, 60%, 100% { translate: 0 0; } 30% { translate: -8px 0; } }
@keyframes nudge-r { 0%, 60%, 100% { translate: 0 0; } 30% { translate: 8px 0; } }
@media (max-width: 1180px) {
  /* not enough side room once the hero column narrows: the deck keeps its full width (a
     squeezed deck clipped the card's chart) and the arrows move up beside the handwritten note */
  .deck-stage { display: block; max-width: none; }
  .deck-stage .deck { width: min(380px, 86vw); margin-inline: auto; }
  .swipe-arrow { position: absolute; bottom: calc(100% + 4px); width: 50px; margin: 0; }
  .swipe-arrow span { font-size: 22px; margin-top: -10px; }
  .swipe-arrow--left { left: max(0px, calc(50% - 190px)); }
  .swipe-arrow--right { right: max(0px, calc(50% - 190px)); }
}
@media (max-width: 640px) {
  .swipe-note { font-size: 30px; margin-bottom: 26px; }
}
/* the auto-swipe demo and thrown cards travel past the screen edge on phones; clip them at
   the hero instead of letting the page scroll sideways */
.hero { overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
  .swipe-arrow__line, .swipe-arrow__head { stroke-dashoffset: 0; }
  .swipe-arrow span { opacity: 1; }
}