@charset "UTF-8";
:root {
  --wall: #E4E5E0;
  --wall-deep: #D8D9D3;
  --ink: #1E1B18;
  --ink-soft: #57534D;
  --gold: #C49A3A;
  --pr: #2A4C9E;   /* Prithvi: the wave blue */
  --pa: #C8306E;   /* Paresha: the lily pink */
  --serif: "Young Serif", Georgia, serif;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --measure: 34rem;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--wall);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

button { font: inherit; color: inherit; cursor: pointer; }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

h1, h2 { font-family: var(--serif); font-weight: 400; margin: 0; }

/* Masthead ------------------------------------------------------------ */

.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 2rem;
  padding: clamp(1.5rem, 4vw, 2.75rem) var(--gutter) 0;
}

.title {
  font-size: clamp(3rem, 9vw, 6.5rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
}

.byline {
  margin: 0;
  font-size: 1rem;
  color: var(--ink-soft);
}

/* The wall: both paintings hung side by side ------------------------- */

.wall {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(2rem, 6vw, 6rem);
  padding: clamp(2rem, 6vw, 4.5rem) var(--gutter) clamp(3rem, 7vw, 5.5rem);
}

.piece { margin: 0; flex: 0 1 auto; }

.piece-open {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.piece img {
  width: auto;
  max-height: min(78vh, 52rem);
  max-width: 100%;
  filter: drop-shadow(0 1px 1px rgba(30, 27, 24, 0.18)) drop-shadow(0 18px 26px rgba(30, 27, 24, 0.20));
}

.piece figcaption {
  margin-top: 1.25rem;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

.piece-name {
  display: block;
  font-family: var(--serif);
  font-size: 1.375rem;
  color: var(--ink);
  margin-bottom: 0.125rem;
}

@media (max-width: 759px) {
  .wall {
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 1.25rem;
    padding-inline: 12vw;
    scroll-padding-inline: 12vw;
    scrollbar-width: none;
  }
  .wall::-webkit-scrollbar { display: none; }
  .piece { flex: 0 0 76vw; scroll-snap-align: center; }
  .piece img { width: 100%; max-height: none; }
}

/* Story ---------------------------------------------------------------- */

.story {
  max-width: calc(var(--measure) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(4rem, 9vw, 7rem);
}

.story p { margin: 0 0 1.1em; line-height: 1.7; }

.lede {
  font-family: var(--serif);
  font-size: clamp(1.625rem, 3.6vw, 2.25rem);
  line-height: 1.2 !important;
  margin-bottom: 0.9em !important;
}

/* Game ----------------------------------------------------------------- */

.game {
  background: var(--wall-deep);
  padding: clamp(3rem, 7vw, 5.5rem) var(--gutter);
}

.game-head { max-width: var(--measure); margin: 0 auto 2rem; }
.game-head h2 { font-size: clamp(1.75rem, 4vw, 2.625rem); line-height: 1.15; margin-bottom: 0.5rem; }
.game-head p { margin: 0; color: var(--ink-soft); }

.game-tabs {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1.75rem;
}

.tab {
  border: 1.5px solid var(--ink);
  background: transparent;
  border-radius: 999px;
  padding: 0.5rem 1.25rem;
  font-weight: 500;
}
.tab[aria-selected="true"] { background: var(--ink); color: var(--wall); }

.game-body {
  display: grid;
  grid-template-columns: minmax(0, 26rem) minmax(0, 18rem);
  justify-content: center;
  align-items: start;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}

@media (max-width: 759px) {
  .game-body { grid-template-columns: minmax(0, 1fr); }
  .game-head { text-align: left; }
}

.board { position: relative; }
.board-img { width: 100%; filter: drop-shadow(0 10px 18px rgba(30, 27, 24, 0.18)); }

/* The 3x3 hit areas follow each canvas's own gold lines. */
.cells {
  position: absolute;
  inset: 0;
  display: grid;
}
.board[data-piece="one"] .cells { grid-template-columns: 33.4% 32.9% 33.7%; grid-template-rows: 32.5% 32.7% 34.8%; }
.board[data-piece="two"] .cells { grid-template-columns: 32.7% 33% 34.3%; grid-template-rows: 33.8% 33.9% 32.3%; }

.cell {
  position: relative;
  border: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  border-radius: 2px;
  transition: box-shadow 160ms ease, background-color 160ms ease;
}

@media (hover: hover) {
  .cell:not([data-done]):hover { box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.85); }
}

.cell[aria-pressed="true"] {
  box-shadow: inset 0 0 0 4px var(--ink), inset 0 0 0 7px rgba(255, 255, 255, 0.9);
}

.cell[data-done] { box-shadow: inset 0 0 0 5px var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.cell[data-done="pr"] { --c: var(--pr); }
.cell[data-done="pa"] { --c: var(--pa); }
.cell[data-done="both"] { --c: var(--gold); }

.badge {
  position: absolute;
  right: 8%;
  bottom: 8%;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.5rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.2em;
  white-space: nowrap;
  background: var(--c);
  color: #fff;
  font: 600 0.8125rem/1 var(--sans);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.badge.miss { background: #fff; color: var(--c); outline: 2px solid var(--c); outline-offset: -2px; }

.panel { padding-top: 0.25rem; }

.ask-q { font-family: var(--serif); font-size: 1.375rem; line-height: 1.25; margin: 0 0 1rem; }

.choices { display: flex; flex-direction: column; gap: 0.5rem; }

.choice {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  text-align: left;
  border: 1.5px solid var(--ink);
  background: var(--wall);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  font-weight: 500;
}
.choice:hover { background: #fff; }

@media (max-width: 759px) {
  .choices { flex-direction: row; }
  .choice { justify-content: center; padding-inline: 0.5rem; }
}

.dot { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 50%; flex: none; }
.dot-pr { background: var(--pr); }
.dot-pa { background: var(--pa); }
.dot-both { background: var(--gold); }

.feedback { min-height: 1.6em; margin: 1rem 0 0; font-weight: 500; }

.tally { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(30, 27, 24, 0.2); }
.score { margin: 0 0 0.75rem; font-family: var(--serif); font-size: 1.25rem; }

.legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: 0.9375rem; color: var(--ink-soft); }
.legend > span { display: inline-flex; align-items: center; gap: 0.4rem; }

.tally-actions { display: flex; gap: 1.25rem; margin-top: 1rem; }
.link-btn {
  border: 0;
  background: none;
  padding: 0;
  font-size: 0.9375rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--ink-soft);
}
.link-btn:hover { color: var(--ink); }

/* Authenticity note ---------------------------------------------------- */

.authentic {
  max-width: calc(var(--measure) + 2 * var(--gutter));
  margin: 0 auto;
  padding: clamp(4rem, 9vw, 6.5rem) var(--gutter);
}
.authentic h2 { font-size: 1.75rem; margin-bottom: 0.6rem; }
.authentic p { margin: 0; color: var(--ink-soft); }

.foot {
  padding: 2rem var(--gutter) 2.5rem;
  border-top: 1px solid rgba(30, 27, 24, 0.15);
  font-size: 0.9375rem;
}
.foot p { margin: 0; }
.foot-small { color: var(--ink-soft); font-size: 0.8125rem; margin-top: 0.25rem !important; }

/* Large viewer --------------------------------------------------------- */

.viewer {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: none;
  max-height: none;
  width: 100%;
  height: 100%;
}
.viewer::backdrop { background: rgba(228, 229, 224, 0.97); }
.viewer[open] { display: grid; place-items: center; }
.viewer-img { max-width: 94vw; max-height: 92dvh; width: auto; filter: drop-shadow(0 18px 30px rgba(30, 27, 24, 0.25)); }
.viewer form { position: fixed; top: 1rem; right: 1rem; z-index: 1; }
.viewer-close {
  border: 1.5px solid var(--ink);
  background: var(--wall);
  border-radius: 999px;
  padding: 0.4rem 1rem;
  font-weight: 500;
}

/* Authenticity seal ---------------------------------------------------- */

.seal {
  border: 0;
  border-radius: 18px;
  padding: 2.25rem 2rem 2rem;
  width: min(26rem, calc(100vw - 2rem));
  background: #FBFBF9;
  color: var(--ink);
  text-align: center;
  box-shadow: 0 30px 60px rgba(30, 27, 24, 0.3);
}
.seal::backdrop { background: rgba(30, 27, 24, 0.55); }
.seal-mark { color: var(--gold); display: grid; place-items: center; margin-bottom: 1rem; }
.seal-title { font-size: 1.625rem; line-height: 1.2; margin-bottom: 0.75rem; }
.seal p { margin: 0 0 0.75rem; color: var(--ink-soft); }
.seal-meta { font-size: 0.875rem; }
.seal-btn {
  margin-top: 0.75rem;
  border: 0;
  background: var(--ink);
  color: #FBFBF9;
  border-radius: 999px;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
}

@media (prefers-reduced-motion: no-preference) {
  .seal[open] { animation: seal-in 420ms cubic-bezier(.2, .9, .3, 1.2); }
  .seal[open] .seal-mark svg path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: tick 500ms 250ms ease-out forwards; }
}
@keyframes seal-in { from { opacity: 0; transform: scale(.92) translateY(8px); } }
@keyframes tick { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* Logo --------------------------------------------------------------- */

.title { display: flex; align-items: center; }
.logo {
  position: relative;
  z-index: 1;
  width: auto;
  height: 1.05em;
  margin-right: -0.42em;         /* the banana lies across the start of the word, as it does on the canvas */
  transform: rotate(-10deg);
  filter: drop-shadow(0 4px 5px rgba(30, 27, 24, 0.28));
}

/* Making it ------------------------------------------------------------ */

.making { padding: clamp(4rem, 9vw, 7rem) var(--gutter) 0; }

.making-head { max-width: var(--measure); margin: 0 auto 2.25rem; }
.making-head h2 { font-size: clamp(1.75rem, 4vw, 2.625rem); line-height: 1.15; margin-bottom: 0.5rem; }
.making-head p { margin: 0; color: var(--ink-soft); }

.reel {
  max-width: 72rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: clamp(9rem, 17vw, 15rem);
  gap: clamp(0.5rem, 1.2vw, 1rem);
}

.shot {
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--wall-deep);
  overflow: hidden;
  border-radius: 4px;
  cursor: zoom-in;
}
.shot img, .shot video { width: 100%; height: 100%; object-fit: cover; display: block; }
.shot-v { cursor: default; }

.shot-a { grid-column: span 4; }
.shot-v { grid-column: span 2; grid-row: span 2; }
.shot-b { grid-column: span 4; }
.shot-c { grid-column: span 3; }
.shot-d { grid-column: span 3; }
.shot-e { grid-column: 2 / span 2; grid-row: span 2; }
.shot-f { grid-column: span 2; grid-row: span 2; }
.shot-e img { object-position: 50% 30%; }
.shot-f img { object-position: 50% 35%; }

@media (max-width: 759px) {
  .reel { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 44vw; }
  .shot-a, .shot-b, .shot-c, .shot-d { grid-column: span 2; }
  .shot-v { grid-column: span 1; grid-row: span 2; }
  .shot-e { grid-column: span 1; grid-row: span 2; }
  .shot-f { grid-column: span 2; grid-row: span 3; }
  .shot-a { order: 1; } .shot-v { order: 3; } .shot-e { order: 4; }
  .shot-b { order: 2; } .shot-c { order: 5; } .shot-d { order: 6; } .shot-f { order: 7; }
}

/* Viewer caption, footer link ----------------------------------------- */

.viewer-fig { margin: 0; display: grid; justify-items: center; gap: 0.9rem; }
.viewer-img { max-height: 84dvh; }
.viewer-cap { font-size: 0.9375rem; color: var(--ink-soft); text-align: center; padding: 0 1rem; }
.viewer-cap:empty { display: none; }

.foot a { color: inherit; text-underline-offset: 3px; }

/* Dates --------------------------------------------------------------- */

.series-date { color: var(--ink-soft); font-size: 0.9375rem; margin-top: 1.75em !important; }

/* In their words ------------------------------------------------------- */
/* Each statement is handwritten on a torn scrap of paper. */

.words {
  background: #E3D3B8;   /* light kraft brown */
  padding: clamp(4rem, 9vw, 6.5rem) var(--gutter);
}

.words-title {
  max-width: 72rem;
  margin: 0 auto clamp(2.25rem, 4vw, 3.25rem);
  text-align: center;
  font-size: clamp(1.75rem, 4vw, 2.625rem);
  line-height: 1.15;
}

.statements {
  max-width: 80rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 38rem));
  justify-content: center;
  align-items: start;
  gap: clamp(2rem, 5vw, 3.5rem);
}

/* The shadow lives on the wrapper because clip-path would cut it off the paper itself. */
.statement {
  --c: var(--pr);
  margin: 0;
  transform: rotate(-1.2deg);
  filter: drop-shadow(0 1px 1px rgba(30, 27, 24, 0.18)) drop-shadow(0 10px 14px rgba(30, 27, 24, 0.16));
}
.statement { position: relative; }

/* Our banana, pinned to the top-left corner of each scrap */
.statement::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: -2.1rem;
  left: -1.4rem;
  width: 4.4rem;
  height: 5.4rem;
  background: url("/assets/img/banana-logo.webp") center / contain no-repeat;
  transform: rotate(-14deg);
  filter: drop-shadow(0 3px 3px rgba(30, 27, 24, 0.25));
}
.statement.by-pa { --c: var(--pa); transform: rotate(1.4deg); margin-top: 1.25rem; }

.paper {
  padding: clamp(2.25rem, 4vw, 3rem) clamp(1.75rem, 3.5vw, 2.5rem) clamp(2rem, 3.5vw, 2.75rem);
  background-color: #FBF8EE;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .25 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  clip-path: polygon(0.0% 0.7%, 1.5% 1.4%, 2.8% 1.2%, 4.8% 0.1%, 7.0% 0.1%, 9.1% 0.2%, 10.4% 0.9%, 13.3% 0.3%, 14.9% 1.4%, 18.0% 1.3%, 20.0% 2.1%, 21.3% 1.9%, 23.1% 0.3%, 24.5% 0.7%, 27.4% 0.4%, 29.7% 1.4%, 31.7% 1.2%, 33.0% 0.1%, 34.6% 1.5%, 36.7% 0.7%, 39.0% 1.0%, 40.8% 1.7%, 43.4% 0.5%, 45.8% 1.2%, 48.7% 1.6%, 50.5% 2.2%, 52.0% 0.9%, 54.7% 0.3%, 56.8% 0.1%, 59.4% 1.7%, 61.7% 1.9%, 63.6% 1.5%, 65.9% 1.3%, 68.1% 1.8%, 71.1% 1.0%, 73.7% 0.1%, 76.3% 1.4%, 79.5% 1.8%, 81.2% 0.8%, 83.8% 0.0%, 85.9% 0.4%, 87.3% 0.1%, 90.1% 0.3%, 91.8% 0.9%, 94.7% 0.2%, 96.8% 1.2%, 99.8% 1.8%, 100.0% 0.4%, 99.7% 4.0%, 99.4% 12.9%, 99.9% 26.5%, 99.8% 33.9%, 99.7% 41.8%, 99.8% 52.5%, 99.7% 58.6%, 99.6% 67.5%, 99.5% 81.1%, 99.6% 91.3%, 100.0% 99.9%, 97.0% 98.1%, 94.1% 98.1%, 92.1% 99.0%, 90.7% 98.5%, 89.3% 99.8%, 87.7% 99.6%, 85.8% 99.9%, 84.6% 99.6%, 83.2% 99.1%, 82.0% 97.9%, 79.6% 99.6%, 77.9% 99.2%, 75.9% 99.7%, 73.0% 97.6%, 70.9% 98.8%, 69.5% 99.8%, 67.6% 99.4%, 64.8% 99.6%, 63.5% 97.7%, 61.3% 99.6%, 59.0% 99.9%, 56.7% 97.7%, 53.8% 98.3%, 52.1% 99.1%, 50.5% 98.1%, 48.3% 98.1%, 46.4% 99.5%, 43.6% 97.6%, 40.7% 98.1%, 37.9% 98.2%, 36.2% 98.8%, 34.3% 99.9%, 33.0% 99.3%, 31.3% 98.3%, 28.2% 98.9%, 25.1% 97.6%, 22.0% 99.1%, 20.4% 99.5%, 18.8% 99.5%, 16.3% 97.8%, 13.5% 98.8%, 11.0% 98.1%, 9.6% 98.4%, 6.6% 98.1%, 3.9% 98.9%, 2.3% 98.1%, 0.4% 98.1%, 0.0% 99.4%, 0.3% 96.0%, 0.5% 82.4%, 0.1% 75.1%, 0.6% 67.9%, 0.1% 55.4%, 0.7% 42.8%, 0.2% 31.5%, 0.1% 21.1%, 0.7% 15.0%);
}
.by-pa .paper { clip-path: polygon(0.0% 2.0%, 3.1% 2.0%, 4.5% 1.3%, 6.5% 1.2%, 8.0% 0.4%, 10.1% 0.5%, 12.2% 0.1%, 13.5% 1.6%, 15.6% 1.1%, 18.3% 0.8%, 19.6% 1.7%, 21.9% 1.4%, 24.4% 2.1%, 26.3% 1.7%, 28.3% 1.3%, 30.8% 0.7%, 32.1% 1.0%, 34.8% 1.3%, 36.9% 1.4%, 38.4% 0.4%, 40.3% 1.8%, 41.9% 0.3%, 43.3% 0.1%, 45.0% 1.3%, 47.9% 0.7%, 49.8% 0.6%, 51.6% 1.7%, 53.9% 0.6%, 55.3% 1.7%, 57.9% 1.8%, 59.6% 1.2%, 62.7% 1.3%, 65.7% 0.4%, 68.9% 0.1%, 70.9% 0.1%, 73.7% 1.5%, 76.9% 1.8%, 80.0% 1.2%, 83.2% 1.6%, 85.1% 2.1%, 87.0% 0.4%, 88.4% 1.0%, 90.0% 2.1%, 93.1% 0.5%, 94.5% 1.2%, 96.0% 1.2%, 98.8% 0.6%, 100.0% 1.4%, 99.7% 4.0%, 99.4% 12.7%, 99.4% 25.3%, 99.7% 36.8%, 99.4% 48.3%, 99.8% 59.4%, 99.7% 67.8%, 99.6% 79.9%, 99.4% 90.3%, 100.0% 98.5%, 98.1% 98.7%, 95.3% 99.4%, 92.2% 99.8%, 89.8% 98.7%, 88.2% 98.7%, 86.0% 98.9%, 83.4% 100.0%, 81.4% 98.1%, 80.0% 97.9%, 78.3% 98.4%, 76.8% 98.9%, 74.8% 99.8%, 72.2% 98.8%, 69.6% 98.7%, 67.3% 98.7%, 65.5% 97.8%, 64.1% 97.9%, 61.2% 98.8%, 58.4% 98.4%, 56.0% 99.3%, 54.2% 99.2%, 52.4% 97.7%, 50.5% 99.1%, 48.4% 98.0%, 46.3% 98.7%, 44.6% 99.3%, 43.2% 99.5%, 41.5% 98.0%, 39.3% 99.7%, 37.1% 99.7%, 34.8% 98.9%, 31.9% 99.4%, 29.0% 99.4%, 25.8% 98.5%, 24.5% 98.1%, 22.8% 99.1%, 21.3% 98.0%, 19.9% 98.2%, 17.9% 98.4%, 16.1% 99.8%, 13.1% 98.4%, 11.6% 97.7%, 8.5% 99.6%, 7.3% 98.5%, 5.8% 98.2%, 3.7% 98.3%, 1.3% 98.2%, 0.0% 99.1%, 0.4% 96.0%, 0.1% 87.4%, 0.6% 80.6%, 0.3% 73.0%, 0.4% 64.5%, 0.6% 54.2%, 0.3% 44.7%, 0.5% 33.5%, 0.2% 20.1%, 0.7% 7.0%); }

.statement p {
  margin: 0 0 1.25rem;
  font-family: "Kalam", "Segoe Print", cursive;
  font-weight: 400;
  font-size: clamp(1.1875rem, 1.9vw, 1.375rem);
  line-height: 1.6;
  color: #2B2724;
}

.statement-by {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  font-family: "Kalam", "Segoe Print", cursive;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--c);
}
.statement-by::before { content: "—"; color: var(--c); }

/* Artist marks: a pentagram before Prithvi's name, a heart before Paresha's, as signed on the bananas. */
.name { white-space: nowrap; }
.mark {
  display: inline-block;
  width: 0.82em;
  height: 0.82em;
  margin-right: 0.24em;
  vertical-align: -0.06em;
  flex: none;
}
.both-marks { display: inline-flex; gap: 0.1em; }
.both-marks .mark { margin-right: 0; }
.choice .both-marks, .legend .both-marks { margin-right: 0.3em; }

/* In the game the marks carry each artist's colour. */
.choice .mark-pr, .legend .mark-pr, .feedback .mark-pr, .statement-by .mark-pr { color: var(--pr); }
.choice .mark-pa, .legend .mark-pa, .feedback .mark-pa, .statement-by .mark-pa { color: var(--pa); }
.badge .mark { color: currentColor; margin-right: 0; width: 0.95em; height: 0.95em; vertical-align: -0.12em; }
.badge .both-marks { gap: 0.15em; }
.statement-by::before { content: none !important; }
.statement-by .mark { width: 0.9em; height: 0.9em; }