/* Quiet Move Club: one stylesheet, no external resources. Prefix: qmv- */

:root {
  --qmv-paper: #f5efe3;
  --qmv-paper-2: #ece3d1;
  --qmv-sheet: #fbf8f1;
  --qmv-ink: #151311;
  --qmv-ink-2: #463f36;
  --qmv-ink-3: #6f665a;
  --qmv-baize: #1f4a38;
  --qmv-baize-2: #163829;
  --qmv-baize-wash: #e4e9de;
  --qmv-brass: #9c7a3c;
  --qmv-rule: #d6cbb5;
  --qmv-display: Didot, "Didot LT STD", "Bodoni 72", "Bodoni MT", "Bodoni 72 Oldstyle", "Hoefler Text", Baskerville, "Baskerville Old Face", "Libre Baskerville", Georgia, "Times New Roman", serif;
  --qmv-text: Baskerville, "Baskerville Old Face", "Libre Baskerville", "Hoefler Text", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --qmv-gutter: 1rem;
  --qmv-max: 72rem;
}

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body.qmv {
  margin: 0;
  background: var(--qmv-paper);
  color: var(--qmv-ink);
  font-family: var(--qmv-text);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-variant-numeric: oldstyle-nums;
  overflow-wrap: break-word;
}

::selection { background: var(--qmv-baize); color: var(--qmv-paper); }

img, svg { max-width: 100%; }

a { color: var(--qmv-baize); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--qmv-ink); }
:focus-visible { outline: 2px solid var(--qmv-baize); outline-offset: 3px; }

h1, h2, h3 {
  font-family: var(--qmv-display);
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 .5em;
  hyphens: auto;
  -webkit-hyphens: auto;
  font-variant-numeric: lining-nums;
}
h1 { font-size: clamp(2rem, 7vw, 3.35rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.55rem, 4.6vw, 2.2rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1.05em; }

.qmv-wrap { width: 100%; max-width: var(--qmv-max); margin: 0 auto; padding: 0 var(--qmv-gutter); }
.qmv-narrow { max-width: 46rem; }

.qmv-vh, .qmv-skip:not(:focus) {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.qmv-skip:focus { position: absolute; left: 1rem; top: .5rem; z-index: 10; background: var(--qmv-ink); color: var(--qmv-paper); padding: .5rem .9rem; }

.qmv-eyebrow {
  font-variant-caps: all-small-caps;
  letter-spacing: .14em;
  color: var(--qmv-ink-3);
  margin: 0 0 .9rem;
  display: flex; align-items: center; gap: .6rem;
}
.qmv-eyebrow::before { content: ""; width: 1.6rem; height: 1px; background: var(--qmv-brass); flex: none; }

.qmv-lede { font-size: 1.18rem; color: var(--qmv-ink-2); max-width: 40rem; }
.qmv-intro { color: var(--qmv-ink-2); max-width: 42rem; margin-bottom: 2rem; }
.qmv-small { font-size: .9rem; color: var(--qmv-ink-3); }

/* ---------- strip + masthead ---------- */
.qmv-strip { background: var(--qmv-ink); color: var(--qmv-paper); font-size: .85rem; }
.qmv-strip__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 1rem; min-height: 2.4rem; }
.qmv-strip__note { margin: 0; font-variant-caps: all-small-caps; letter-spacing: .12em; color: #cfc6b4; }
.qmv-tongues ul { list-style: none; display: flex; gap: .2rem; margin: 0; padding: 0; }
.qmv-tongues a {
  display: inline-block; padding: .3rem .5rem; color: var(--qmv-paper); text-decoration: none;
  letter-spacing: .1em; font-size: .8rem; border: 1px solid transparent;
}
.qmv-tongues a[aria-current] { border-color: #8b8372; }
.qmv-tongues a:hover { background: var(--qmv-baize); color: var(--qmv-paper); }

.qmv-mast { border-bottom: 1px solid var(--qmv-rule); background: var(--qmv-paper); }
.qmv-mast__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; padding-top: 1rem; padding-bottom: 1rem; }
.qmv-mark { display: inline-flex; align-items: center; gap: .7rem; color: var(--qmv-ink); text-decoration: none; }
.qmv-mark__svg { width: 30px; height: 30px; flex: none; }
.qmv-mark__word { font-family: var(--qmv-display); font-size: 1.4rem; letter-spacing: .02em; line-height: 1; }
.qmv-mark__word em { color: var(--qmv-baize); }

.qmv-burger { display: none; }
.qmv-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
.qmv-nav a { color: var(--qmv-ink); text-decoration: none; font-variant-caps: all-small-caps; letter-spacing: .1em; font-size: 1.05rem; padding: .35rem 0; display: inline-block; border-bottom: 1px solid transparent; }
.qmv-nav a:hover { border-bottom-color: var(--qmv-baize); color: var(--qmv-baize); }

@media (max-width: 47.99rem) {
  .qmv-js .qmv-burger {
    display: inline-flex; align-items: center; gap: .55rem;
    font: inherit; font-variant-caps: all-small-caps; letter-spacing: .1em;
    background: transparent; color: var(--qmv-ink); border: 1px solid var(--qmv-ink);
    padding: .4rem .75rem; border-radius: 2px; cursor: pointer;
  }
  .qmv-burger__bars, .qmv-burger__bars::before, .qmv-burger__bars::after {
    display: block; width: 16px; height: 1.5px; background: currentColor; position: relative;
  }
  .qmv-burger__bars::before, .qmv-burger__bars::after { content: ""; position: absolute; left: 0; }
  .qmv-burger__bars::before { top: -5px; }
  .qmv-burger__bars::after { top: 5px; }
  .qmv-nav { flex-basis: 100%; }
  .qmv-js .qmv-nav { display: none; }
  .qmv-js .qmv-nav.is-open { display: block; }
  .qmv-nav ul { flex-direction: column; gap: 0; border-top: 1px solid var(--qmv-rule); }
  .qmv-nav li { border-bottom: 1px solid var(--qmv-rule); }
  .qmv-nav a { display: block; padding: .7rem 0; }
}

/* ---------- checker band ---------- */
.qmv-rank {
  height: 12px;
  background: repeating-conic-gradient(var(--qmv-ink) 0 25%, var(--qmv-paper) 0 50%) 0 0 / 24px 24px;
}

/* ---------- opening (hero) ---------- */
.qmv-open { padding: 2.5rem 0 3rem; border-bottom: 1px solid var(--qmv-rule); }
.qmv-open__in { display: grid; gap: 2.5rem; align-items: center; }
.qmv-open__fig { margin: 0; justify-self: center; width: 100%; max-width: 22rem; }
.qmv-board { display: block; width: 100%; height: auto; }
.qmv-coord { font-family: var(--qmv-text); font-size: 12px; fill: var(--qmv-ink-3); font-style: italic; }
.qmv-open__fig figcaption { margin-top: .8rem; font-style: italic; color: var(--qmv-ink-3); font-size: .95rem; text-align: center; }
@media (min-width: 56rem) {
  .qmv-open { padding: 4.5rem 0 5rem; }
  .qmv-open__in { grid-template-columns: 1.35fr 1fr; gap: 4rem; }
  .qmv-open__fig { max-width: 24rem; }
}

/* ---------- buttons ---------- */
.qmv-btn {
  display: inline-block; background: var(--qmv-baize); color: var(--qmv-paper);
  text-decoration: none; padding: .7rem 1.15rem; border: 1px solid var(--qmv-baize); border-radius: 2px;
  font-variant-caps: all-small-caps; letter-spacing: .1em; font-size: 1.05rem; line-height: 1.3;
}
.qmv-btn:hover { background: var(--qmv-ink); border-color: var(--qmv-ink); color: var(--qmv-paper); }
.qmv-btn--quiet { background: transparent; color: var(--qmv-ink); border-color: var(--qmv-ink); }
.qmv-btn--quiet:hover { background: var(--qmv-ink); color: var(--qmv-paper); }
.qmv-ext { font-size: .85em; }

/* ---------- generic section ---------- */
.qmv-sec { padding: 3rem 0; border-bottom: 1px solid var(--qmv-rule); }
@media (min-width: 56rem) { .qmv-sec { padding: 4.5rem 0; } }

.qmv-split { display: grid; gap: 2rem; }
@media (min-width: 54rem) { .qmv-split { grid-template-columns: 1.6fr 1fr; gap: 4rem; align-items: start; } }
.qmv-notes p { max-width: 40rem; }
.qmv-aside { background: var(--qmv-baize); color: var(--qmv-paper); padding: 1.5rem 1.4rem; border-radius: 2px; }
.qmv-aside h3 { color: var(--qmv-paper); }

.qmv-list { margin: 0 0 1.1em; padding: 0; list-style: none; }
.qmv-list li { position: relative; padding-left: 1.4rem; margin-bottom: .55em; }
.qmv-list li::before { content: "▪"; position: absolute; left: .1rem; top: 0; color: var(--qmv-baize); font-size: .85em; }
ol.qmv-list { counter-reset: qmv-n; }
ol.qmv-list li { counter-increment: qmv-n; padding-left: 2rem; }
ol.qmv-list li::before { content: counter(qmv-n) "."; font-family: var(--qmv-display); font-size: 1em; color: var(--qmv-baize); font-variant-numeric: lining-nums; }
.qmv-list--x li::before { content: "×"; color: #cfd8cd; }
.qmv-list--yes li::before { content: "+"; font-weight: 700; }
.qmv-list--no li::before { content: "−"; color: var(--qmv-ink-3); font-weight: 700; }

/* ---------- catalogue (numbered moves) ---------- */
.qmv-moves { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--qmv-ink); }
.qmv-move { display: grid; grid-template-columns: 2.9rem minmax(0, 1fr); gap: .25rem 1rem; padding: 1.6rem 0; border-bottom: 1px solid var(--qmv-rule); }
.qmv-move__n { font-family: var(--qmv-display); font-size: 2.4rem; line-height: 1; color: var(--qmv-baize); font-variant-numeric: lining-nums; }
.qmv-move__name { font-size: 1.65rem; margin-bottom: .3rem; }
.qmv-move__name a { color: var(--qmv-ink); text-decoration: none; }
.qmv-move__name a:hover { color: var(--qmv-baize); text-decoration: underline; }
.qmv-move__line { color: var(--qmv-ink-2); margin-bottom: .6rem; }
.qmv-move__line::before { content: "… "; color: var(--qmv-ink-3); }
.qmv-tags { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem .4rem; font-variant-caps: all-small-caps; letter-spacing: .08em; color: var(--qmv-ink-3); font-size: .95rem; }
.qmv-tags li + li::before { content: "·"; margin-right: .4rem; }
.qmv-move__acts { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; margin: 0; }
.qmv-out { color: var(--qmv-ink-2); }
@media (min-width: 48rem) {
  .qmv-move { grid-template-columns: 5.5rem minmax(0, 1fr); padding: 2rem 0; }
  .qmv-move__n { font-size: 3.6rem; }
  .qmv-move__body { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 0 2.5rem; align-items: start; }
  .qmv-move__name, .qmv-move__line { grid-column: 1; }
  .qmv-tags { grid-column: 2; grid-row: 1 / span 2; flex-direction: column; gap: .15rem; padding-top: .45rem; }
  .qmv-tags li + li::before { content: none; }
  .qmv-move__acts { grid-column: 1 / -1; }
}

/* ---------- criteria (files a–f) ---------- */
.qmv-files { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem 2.5rem; }
.qmv-files li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 1rem; align-items: start; }
.qmv-file {
  width: 2.5rem; height: 2.5rem; display: grid; place-items: center;
  background: var(--qmv-ink); color: var(--qmv-paper); font-family: var(--qmv-display); font-style: italic; font-size: 1.35rem;
}
.qmv-files li:nth-child(even) .qmv-file { background: var(--qmv-baize); }
.qmv-files p { margin: 0; }
@media (min-width: 44rem) { .qmv-files { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .qmv-files { grid-template-columns: 1fr 1fr 1fr; } }

/* ---------- comparison table ---------- */
.qmv-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--qmv-ink); background: var(--qmv-sheet); margin-bottom: 1rem; }
.qmv-table { border-collapse: collapse; width: 100%; min-width: 50rem; font-size: .97rem; line-height: 1.45; }
.qmv-table th, .qmv-table td { text-align: left; vertical-align: top; padding: .85rem 1rem; border-bottom: 1px solid var(--qmv-rule); }
.qmv-table thead th { background: var(--qmv-ink); color: var(--qmv-paper); font-weight: 400; font-variant-caps: all-small-caps; letter-spacing: .1em; border-bottom: 0; }
.qmv-table tbody tr:nth-child(odd) { background: var(--qmv-paper-2); }
.qmv-table tbody th { font-family: var(--qmv-display); font-weight: 400; font-size: 1.15rem; white-space: nowrap; }
.qmv-table tbody th a { color: var(--qmv-ink); }

/* ---------- reading room shelf ---------- */
.qmv-shelf { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.qmv-shelf a { display: block; height: 100%; padding: 1.3rem 0 .5rem; border-top: 3px double var(--qmv-ink); text-decoration: none; color: var(--qmv-ink); }
.qmv-shelf__t { display: block; font-family: var(--qmv-display); font-size: 1.4rem; line-height: 1.2; margin-bottom: .5rem; hyphens: auto; -webkit-hyphens: auto; }
.qmv-shelf__d { display: block; color: var(--qmv-ink-2); }
.qmv-shelf a:hover .qmv-shelf__t { color: var(--qmv-baize); text-decoration: underline; text-decoration-thickness: 1px; }
@media (min-width: 52rem) { .qmv-shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; } }

/* ---------- questions ---------- */
.qmv-q { border-top: 1px solid var(--qmv-rule); }
.qmv-q:last-child { border-bottom: 1px solid var(--qmv-rule); }
.qmv-q summary {
  list-style: none; cursor: pointer; padding: 1.1rem 2.2rem 1.1rem 0; position: relative;
  font-family: var(--qmv-display); font-size: 1.25rem; line-height: 1.3;
}
.qmv-q summary::-webkit-details-marker { display: none; }
.qmv-q summary::after { content: "+"; position: absolute; right: .25rem; top: .95rem; font-size: 1.5rem; color: var(--qmv-baize); transition: transform .2s; }
.qmv-q[open] summary::after { transform: rotate(45deg); }
.qmv-q__a { padding: 0 0 .8rem; color: var(--qmv-ink-2); }

/* ---------- breadcrumbs ---------- */
.qmv-crumbs ol { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .2rem .5rem; font-size: .9rem; color: var(--qmv-ink-3); }
.qmv-crumbs li + li::before { content: "/"; margin-right: .5rem; color: var(--qmv-rule); }
.qmv-crumbs a { color: var(--qmv-ink-3); }

/* ---------- review ---------- */
.qmv-review, .qmv-guide, .qmv-plain { padding-bottom: 3.5rem; }
.qmv-review__head, .qmv-guide__head, .qmv-plain__head { padding: 2rem 0 2rem; border-bottom: 1px solid var(--qmv-rule); margin-bottom: 2rem; }
.qmv-review__n { color: var(--qmv-baize); }
.qmv-byline { font-size: .92rem; color: var(--qmv-ink-3); font-style: italic; margin: 0; }

.qmv-review__grid { display: grid; gap: 2rem; }
.qmv-glance { background: var(--qmv-sheet); border: 1px solid var(--qmv-ink); padding: 1.3rem 1.3rem .4rem; align-self: start; }
.qmv-glance h2 { font-size: 1.3rem; border-bottom: 1px solid var(--qmv-rule); padding-bottom: .6rem; }
.qmv-glance dl { margin: 0 0 1.2rem; }
.qmv-glance dl div { padding: .5rem 0; border-bottom: 1px dotted var(--qmv-rule); }
.qmv-glance dt { font-variant-caps: all-small-caps; letter-spacing: .1em; color: var(--qmv-ink-3); font-size: .95rem; }
.qmv-glance dd { margin: 0; line-height: 1.45; }
@media (min-width: 60rem) {
  .qmv-review__grid { grid-template-columns: minmax(0, 1fr) 19rem; gap: 4rem; }
  .qmv-glance { grid-column: 2; grid-row: 1; position: sticky; top: 1.5rem; }
  .qmv-review__grid > .qmv-prose { grid-column: 1; grid-row: 1; }
}

.qmv-prose { max-width: 41rem; min-width: 0; }
.qmv-prose p, .qmv-prose li, .qmv-prose dd { hyphens: auto; -webkit-hyphens: auto; }
.qmv-prose h2 { margin-top: 2.4rem; }
.qmv-prose section:first-child h2 { margin-top: 0; }
.qmv-prose h3 { font-family: var(--qmv-text); font-variant-caps: all-small-caps; letter-spacing: .1em; font-size: 1.05rem; color: var(--qmv-ink-2); }

.qmv-pair { display: grid; gap: .5rem 2rem; }
@media (min-width: 40rem) { .qmv-pair { grid-template-columns: 1fr 1fr; } }
.qmv-pair--ledger > div { border-top: 2px solid var(--qmv-ink); padding-top: .8rem; }

.qmv-stamp { margin-top: 2.4rem; padding: 1.4rem 1.4rem .4rem; background: var(--qmv-baize-wash); border-left: 4px solid var(--qmv-baize); }
.qmv-stamp h2 { margin-top: 0; font-size: 1.45rem; }

.qmv-cta { margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid var(--qmv-rule); }
.qmv-cta p:first-child { font-style: italic; color: var(--qmv-ink-2); }

.qmv-turns { display: grid; gap: 1rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 2px solid var(--qmv-ink); }
.qmv-turn { display: block; text-decoration: none; color: var(--qmv-ink); font-family: var(--qmv-display); font-size: 1.35rem; line-height: 1.2; }
.qmv-turn span { display: block; font-family: var(--qmv-text); font-size: .85rem; font-variant-caps: all-small-caps; letter-spacing: .1em; color: var(--qmv-ink-3); margin-bottom: .2rem; }
.qmv-turn:hover { color: var(--qmv-baize); }
@media (min-width: 40rem) { .qmv-turns { grid-template-columns: 1fr 1fr; } .qmv-turn--next { text-align: right; grid-column: 2; } }

/* ---------- guides ---------- */
.qmv-guide__grid { display: grid; gap: 2rem; }
.qmv-toc { border: 1px solid var(--qmv-rule); padding: 1rem 1.2rem; background: var(--qmv-sheet); align-self: start; }
.qmv-toc__h { font-variant-caps: all-small-caps; letter-spacing: .12em; color: var(--qmv-ink-3); margin-bottom: .4rem; }
.qmv-toc ol { margin: 0; padding-left: 1.3rem; }
.qmv-toc li { margin-bottom: .3rem; font-size: .97rem; line-height: 1.4; }
@media (min-width: 60rem) {
  .qmv-guide__grid { grid-template-columns: 15rem minmax(0, 1fr); gap: 4rem; }
  .qmv-toc { position: sticky; top: 1.5rem; }
}
.qmv-gloss { margin: 0 0 1.5rem; }
.qmv-gloss__row { padding: .75rem 0; border-bottom: 1px dotted var(--qmv-rule); }
.qmv-gloss dt { font-family: var(--qmv-display); font-size: 1.15rem; }
.qmv-gloss dd { margin: .15rem 0 0; color: var(--qmv-ink-2); }
.qmv-more { margin-top: 2.5rem; padding-top: 1.2rem; border-top: 3px double var(--qmv-ink); }
.qmv-more h2 { font-size: 1.35rem; }

/* ---------- footer ---------- */
.qmv-foot { background: var(--qmv-ink); color: #d9d1c1; font-size: .95rem; padding-bottom: 2rem; }
.qmv-foot .qmv-rank { background: repeating-conic-gradient(var(--qmv-paper) 0 25%, var(--qmv-baize) 0 50%) 0 0 / 24px 24px; margin-bottom: 2.5rem; }
.qmv-foot a { color: var(--qmv-paper); }
.qmv-foot a:hover { color: #b9d3c3; }
.qmv-foot :focus-visible { outline-color: var(--qmv-paper); }
.qmv-foot__grid { display: grid; gap: 2rem; margin-bottom: 2rem; }
.qmv-foot__grid ul { list-style: none; margin: 0; padding: 0; }
.qmv-foot__grid li { margin-bottom: .4rem; line-height: 1.35; }
.qmv-foot__name { font-family: var(--qmv-display); font-size: 1.6rem; color: var(--qmv-paper); margin-bottom: .5rem; }
.qmv-foot__name em { color: #9cc2ad; }
.qmv-foot__h { font-variant-caps: all-small-caps; letter-spacing: .12em; color: #a59c8b; margin-bottom: .6rem; }
.qmv-foot__note { font-size: .85rem; color: #a59c8b; max-width: 52rem; border-top: 1px solid #3a352e; padding-top: 1rem; margin: 0; }
.qmv-foot__note + .qmv-foot__note { border-top: 0; padding-top: .4rem; }
@media (min-width: 48rem) { .qmv-foot__grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 2.5rem; } }

/* ---------- 404 ---------- */
.qmv-lost { padding: 4rem 0; text-align: center; }
.qmv-lost__board { display: block; margin: 0 auto 1.5rem; width: 96px; height: 96px; }
.qmv-lost .qmv-lede { margin-left: auto; margin-right: auto; }

@media (min-width: 48rem) { :root { --qmv-gutter: 2rem; } }