/* Myths, busted (owner approved, 2026-10-13): a guessing game, not another article.
   One big myth card at a time, True or Busted, a rubber stamp that lands with a thump,
   one short sourced line, and the score as coloured bars. On /myths/ and the home page. */
:root { --true: #3F6F22; --half: #94622F; --todo: #C7CBC5; }

/* /myths/ title band */
.mh { padding-block: 26px 22px; background: var(--white); }
.mh .crumbs { margin: 0 0 14px; font-stretch: 75%; font-weight: 650; font-size: 15px; color: var(--ink2); }
.mh .crumbs a { color: inherit; }
.mh-h { margin: 0; font-stretch: 125%; font-weight: 860; font-size: clamp(42px, 12vw, 120px); line-height: .9; letter-spacing: -.035em; }
.mh-stamp {
  display: inline-block; transform: rotate(-6deg) translateY(-.04em); margin-left: .08em;
  color: var(--red); border: .07em double var(--red); padding: .02em .16em .06em; border-radius: .06em;
  font-stretch: 75%; letter-spacing: 0;
}
.mh-lede { margin: 16px 0 0; font-size: 19px; color: var(--ink2); max-width: 34em; }
.mh-lede b { color: var(--ink); font-weight: 650; }
.mh-meta { margin: 12px 0 0; font-stretch: 75%; font-weight: 650; font-size: 15px; color: var(--ink2); }
@media (min-width: 1024px) { .mh { padding-block: 44px 40px; } .mh-lede { font-size: 23px; } }

.mg-band { background: var(--lime); padding-block: 22px 40px; }
@media (min-width: 1024px) { .mg-band { padding-block: 48px 72px; } }

/* The game */
.mg { max-width: 980px; }
.mg-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 12px; }
.mg-count { margin: 0; font-stretch: 75%; font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; }
.mg-dots { list-style: none; margin: 0; padding: 0; display: flex; gap: 5px; }
.mg-dots li { width: 22px; height: 7px; background: var(--todo); transition: background-color .3s var(--ease); }
.mg-dots li.is-now { background: var(--basalt); }
.mg-dots li.right { background: var(--true); }
.mg-dots li.wrong { background: var(--red); }
@media (max-width: 420px) { .mg-dots li { width: 16px; } }

.mc { background: var(--white); color: var(--ink); border: 2px solid var(--basalt); display: grid; overflow: hidden; }
@media (min-width: 860px) { .mc { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); min-height: 420px; } }
.mc.is-in { animation: mc-in .32s var(--ease) both; }
@keyframes mc-in { from { transform: translateX(28px); opacity: 0; } to { transform: none; opacity: 1; } }
.mc-ph { position: relative; aspect-ratio: 16 / 10; background: var(--lime); overflow: hidden; }
@media (min-width: 860px) { .mc-ph { aspect-ratio: auto; min-height: 100%; } }
.mc-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mc-cr { position: absolute; left: 0; bottom: 0; padding: 3px 7px; background: rgba(22, 25, 26, .7); color: #fff; font-stretch: 75%; font-weight: 600; font-size: 12px; }
.mc-body { padding: 18px 18px 20px; display: flex; flex-direction: column; min-width: 0; }
@media (min-width: 860px) { .mc-body { padding: 30px 32px; justify-content: center; } }
.mc-q { margin: 0 0 8px; font-stretch: 75%; font-weight: 650; font-size: 15px; color: var(--ink3); }
.mc-s { margin: 0 0 20px; font-stretch: 125%; font-weight: 840; font-size: clamp(29px, 7.6vw, 46px); line-height: .98; letter-spacing: -.03em; text-wrap: balance; }
.mc.is-compact .mc-s { font-size: clamp(26px, 6.6vw, 38px); }
@media (min-width: 860px) { .mc.is-compact { min-height: 340px; } }
.mc-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mc-b {
  height: 60px; border: 2px solid var(--basalt); background: var(--white); color: var(--ink); border-radius: 2px; cursor: pointer;
  font: inherit; font-stretch: 75%; font-weight: 820; font-size: 22px; letter-spacing: .01em;
  transition: background-color .15s var(--ease), color .15s var(--ease), transform .12s var(--ease);
}
.mc-b:hover { background: var(--basalt); color: #fff; }
.mc-b:active { transform: scale(.96); }

/* The stamp */
.stamp {
  position: absolute; right: 14px; top: 14px; z-index: 2;
  display: flex; flex-direction: column; align-items: center; line-height: .9;
  padding: 7px 14px 6px; background: rgba(255, 255, 255, .9); color: var(--c);
  border: 5px double var(--c); border-radius: 3px; transform: rotate(-9deg);
  font-stretch: 75%; font-weight: 900; font-size: clamp(30px, 8vw, 46px); text-transform: uppercase; letter-spacing: .05em;
  box-shadow: 0 6px 18px rgba(22, 25, 26, .25);
}
.stamp small { font-size: .36em; letter-spacing: .08em; margin-top: 3px; }
.v-busted { --c: var(--red); }
.v-true { --c: var(--true); }
.v-half { --c: var(--half); }
.is-thump .stamp { animation: thump .34s cubic-bezier(.3, 1.4, .5, 1) both; }
.is-thump .mc-ph img { animation: jolt .28s .2s ease-out both; }
@keyframes thump { from { transform: scale(2.4) rotate(-18deg); opacity: 0; } 70% { opacity: 1; } to { transform: scale(1) rotate(-9deg); opacity: 1; } }
@keyframes jolt { 0% { transform: none; } 30% { transform: translate(2px, 3px) scale(1.01); } 100% { transform: none; } }

.mc-out { animation: mc-rise .3s .12s var(--ease) both; }
@keyframes mc-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.mc-v { margin: 0 0 6px; font-size: 19px; }
.mc-v b { color: var(--c); font-stretch: 112%; font-weight: 820; }
.mc-v span { color: var(--ink2); }
.mc-a { margin: 0 0 16px; font-size: 17px; line-height: 1.45; }
.mc-a i { color: var(--ink2); }
.mc .src { background: rgba(59, 61, 181, .1); color: var(--blue); }
.mc-next { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.mc-go { display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 20px; border: 0; border-radius: 2px; background: var(--blue); color: #fff !important; cursor: pointer; text-decoration: none; font: inherit; font-stretch: 75%; font-weight: 780; font-size: 19px; transition: transform .12s var(--ease); }
.mc-go:active { transform: scale(.96); }
.mc-go span { transition: transform .2s var(--ease); }
.mc-go:hover span { transform: translateX(4px); }
.mc-more { font-stretch: 75%; font-weight: 700; font-size: 15px; color: var(--ink2) !important; }
.mc-again { background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink); font: inherit; font-stretch: 75%; font-weight: 700; font-size: 16px; text-decoration: underline; text-underline-offset: .2em; }

/* Score card */
.mc-end { display: block; padding: 30px 22px; min-height: 0; }
.mc-big { margin: 0; display: flex; align-items: baseline; gap: 10px; }
.mc-big b { font-stretch: 125%; font-weight: 900; font-size: clamp(88px, 26vw, 170px); line-height: .85; letter-spacing: -.04em; }
.mc-big span { font-stretch: 75%; font-weight: 750; font-size: 26px; color: var(--ink2); }
.mc-line { margin: 12px 0 20px; font-stretch: 112%; font-weight: 760; font-size: 24px; line-height: 1.15; max-width: 22em; }

/* Home-page taster (a dark band) */
.dark .mg-count { color: var(--paper-n); }
.dark .mg-dots li { background: #3A3F40; }
.dark .mg-dots li.is-now { background: var(--paper-n); }
.dark .mg-dots li.right { background: #6FA34A; }
.dark .mg-dots li.wrong { background: #FF6B74; }
.mg-all { margin: 16px 0 0; font-stretch: 75%; font-weight: 700; font-size: 17px; }

@media (prefers-reduced-motion: reduce) {
  .mc.is-in, .is-thump .stamp, .is-thump .mc-ph img, .mc-out { animation: none; }
}