/* MergeDiary — editorial notes on merge games */

:root {
  --md-ink: #0b0b0e;
  --md-ink-soft: #5f6470;
  --md-line: #e5e7eb;
  --md-line-strong: #d4d7dd;
  --md-paper: #ffffff;
  --md-wash: #f6f6f7;
  --md-accent: #7B1FA2;
  --md-accent-ink: #ffffff;

  --md-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --md-serif: Georgia, "Times New Roman", serif;

  --md-r-card: 32px;
  --md-r-panel: 24px;
  --md-r-small: 16px;
  --md-r-pill: 999px;

  --md-s-8: 8px;
  --md-s-12: 12px;
  --md-s-16: 16px;
  --md-s-20: 20px;
  --md-s-24: 24px;
  --md-s-32: 32px;
  --md-s-40: 40px;
  --md-s-48: 48px;
  --md-s-56: 56px;
  --md-s-72: 72px;
  --md-s-96: 96px;

  --md-shell: 1200px;
}

* { box-sizing: border-box; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--md-paper);
  color: var(--md-ink);
  font-family: var(--md-sans);
  font-size: 17px;
  line-height: 1.45;
  letter-spacing: -0.005em;
  font-weight: 400;
}

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

a { color: var(--md-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--md-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, h2, h3, h4 { margin: 0; font-weight: 500; }

p { margin: 0 0 var(--md-s-16); }

/* ---------- shell + shared bits ---------- */

.md-shell {
  width: 100%;
  max-width: var(--md-shell);
  margin: 0 auto;
  padding-inline: var(--md-s-24);
}

.md-band { padding-block: var(--md-s-72); }
.md-band--wash { background: var(--md-wash); }

.md-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--md-accent);
  margin-bottom: var(--md-s-16);
}

.md-title {
  font-size: clamp(34px, 5.2vw, 56px);
  line-height: 0.98;
  letter-spacing: -0.032em;
  max-width: 20ch;
}

.md-deck {
  margin-top: var(--md-s-16);
  color: var(--md-ink-soft);
  font-size: 19px;
  line-height: 1.5;
  max-width: 62ch;
}

.md-rule {
  height: 1px;
  background: var(--md-line);
  border: 0;
  margin: 0;
}

.md-act {
  display: inline-flex;
  align-items: center;
  gap: var(--md-s-8);
  padding: 14px 26px;
  border-radius: var(--md-r-pill);
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.md-act:hover { text-decoration: none; }
.md-act--solid {
  background: var(--md-accent);
  color: var(--md-accent-ink);
  border-color: var(--md-accent);
}
.md-act--solid:hover { background: #631785; border-color: #631785; }
.md-act--ghost {
  background: var(--md-paper);
  color: var(--md-ink);
  border-color: var(--md-line-strong);
}
.md-act--ghost:hover { border-color: var(--md-ink); }
.md-act--wide { width: 100%; justify-content: center; }

.md-flag {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border: 1px solid var(--md-line-strong);
  border-radius: var(--md-r-pill);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--md-ink);
}

.md-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--md-accent);
  color: #fff;
  padding: 10px 18px;
  border-radius: 0 0 var(--md-r-small) 0;
  z-index: 60;
}
.md-skip:focus { left: 0; }

/* ---------- 1. topbar ---------- */

.md-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--md-paper);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.md-topbar.has-line { border-bottom-color: var(--md-line); }

.md-topbar__inner {
  display: flex;
  align-items: center;
  gap: var(--md-s-24);
  min-height: 74px;
}

.md-mark {
  font-family: var(--md-serif);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--md-ink);
  white-space: nowrap;
}
.md-mark:hover { text-decoration: none; }
.md-mark__tail { color: var(--md-accent); }

.md-nav { margin-left: auto; }

.md-nav__list {
  display: flex;
  align-items: center;
  gap: var(--md-s-20);
  list-style: none;
  margin: 0;
  padding: 0;
}

.md-nav__link {
  font-size: 15px;
  font-weight: 500;
  color: var(--md-ink);
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
}
.md-nav__link:hover {
  text-decoration: none;
  border-bottom-color: var(--md-accent);
  color: var(--md-accent);
}

.md-topbar__act { flex: 0 0 auto; }

.md-burger {
  display: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: var(--md-paper);
  border: 1px solid var(--md-line-strong);
  border-radius: var(--md-r-pill);
  color: var(--md-ink);
  cursor: pointer;
}

/* ---------- 2. lede (hero) ---------- */

.md-lede { padding-block: var(--md-s-56) var(--md-s-72); }

.md-lede__grid {
  display: grid;
  grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  gap: var(--md-s-48);
  align-items: center;
}

.md-lede__copy { text-align: left; }

.md-lede__title {
  font-size: clamp(44px, 7.4vw, 80px);
  line-height: 0.92;
  letter-spacing: -0.045em;
  margin: 0;
}
.md-lede__accent { color: var(--md-accent); }

.md-lede__sub {
  margin-top: var(--md-s-24);
  font-size: 19px;
  line-height: 1.5;
  color: var(--md-ink-soft);
  max-width: 46ch;
}

.md-lede__acts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--md-s-12);
  margin-top: var(--md-s-32);
}

.md-lede__strip {
  display: flex;
  align-items: center;
  gap: var(--md-s-12);
  margin-top: var(--md-s-32);
  padding-top: var(--md-s-24);
  border-top: 1px solid var(--md-line);
  flex-wrap: wrap;
}

.md-lede__chip {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  border: 1px solid var(--md-line);
  overflow: hidden;
}
.md-lede__chip img { width: 100%; height: 100%; object-fit: cover; }

.md-lede__chiptext {
  font-size: 14px;
  color: var(--md-ink-soft);
  margin-left: var(--md-s-8);
  max-width: 22ch;
}

.md-lede__collage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--md-s-12);
}

.md-lede__tile {
  border-radius: var(--md-r-panel);
  overflow: hidden;
  border: 1px solid var(--md-line);
  aspect-ratio: 16 / 10;
  background: var(--md-wash);
}
.md-lede__tile img { width: 100%; height: 100%; object-fit: cover; }
.md-lede__tile--drop { transform: translateY(var(--md-s-24)); }

/* ---------- 3. shelf (game catalogue) ---------- */

.md-shelf__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--md-s-24);
  margin-bottom: var(--md-s-40);
}

.md-shelf__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--md-s-24);
}

.md-shelf__entry {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: var(--md-s-20);
  background: var(--md-paper);
  border: 1px solid var(--md-line);
  border-radius: var(--md-r-card);
  padding: var(--md-s-20);
  transition: border-color .2s ease;
}
.md-shelf__entry:hover { border-color: var(--md-line-strong); }

.md-shelf__visual {
  display: flex;
  flex-direction: column;
  gap: var(--md-s-12);
}

.md-shelf__icon {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  border: 1px solid var(--md-line);
  overflow: hidden;
}
.md-shelf__icon img { width: 100%; height: 100%; object-fit: cover; }

.md-shelf__shot {
  flex: 0 0 auto;
  border-radius: var(--md-r-small);
  overflow: hidden;
  border: 1px solid var(--md-line);
  aspect-ratio: 3 / 4;
  background: var(--md-wash);
}
.md-shelf__shot img { width: 100%; height: 100%; object-fit: cover; }

.md-shelf__body { min-width: 0; }

.md-shelf__name {
  font-size: 23px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--md-s-12);
}

.md-shelf__score {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--md-accent);
  border: 1px solid var(--md-accent);
  border-radius: var(--md-r-pill);
  padding: 2px 10px;
  white-space: nowrap;
}
.md-shelf__score svg { width: 13px; height: 13px; }

.md-shelf__tag {
  display: block;
  flex: 0 0 100%;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--md-ink-soft);
}

.md-shelf__text {
  margin: var(--md-s-12) 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--md-ink-soft);
}

.md-shelf__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--md-s-12);
  margin-top: var(--md-s-16);
  padding-top: var(--md-s-12);
  border-top: 1px solid var(--md-line);
  font-size: 14px;
  color: var(--md-ink-soft);
}

.md-shelf__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  color: var(--md-accent);
}
.md-shelf__link svg { width: 14px; height: 14px; }

.md-shelf__note {
  margin: var(--md-s-24) 0 0;
  font-size: 14px;
  color: var(--md-ink-soft);
}

/* ---------- 4. craft (genres and mechanics) ---------- */

.md-craft__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--md-s-16);
  margin-top: var(--md-s-40);
}

.md-craft__cell {
  background: var(--md-paper);
  border: 1px solid var(--md-line);
  border-radius: var(--md-r-panel);
  padding: var(--md-s-24);
}

.md-craft__glyph {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  border: 1px solid var(--md-accent);
  color: var(--md-accent);
  margin-bottom: var(--md-s-16);
}
.md-craft__glyph svg { width: 22px; height: 22px; }

.md-craft__name {
  font-size: 19px;
  letter-spacing: -0.015em;
}

.md-craft__note {
  margin: var(--md-s-8) 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--md-ink-soft);
}

/* ---------- 5. voices (player reviews) ---------- */

.md-voices__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--md-s-24);
  margin-top: var(--md-s-40);
}

.md-voices__card {
  background: var(--md-paper);
  border: 1px solid var(--md-line);
  border-radius: var(--md-r-card);
  padding: var(--md-s-32);
  display: flex;
  flex-direction: column;
}

.md-voices__stars {
  display: inline-flex;
  gap: 3px;
  color: var(--md-accent);
  margin-bottom: var(--md-s-16);
}
.md-voices__stars svg { width: 16px; height: 16px; }

.md-voices__quote {
  margin: 0;
  font-size: 19px;
  line-height: 1.42;
  letter-spacing: -0.015em;
}

.md-voices__who {
  margin-top: auto;
  padding-top: var(--md-s-24);
  font-size: 14px;
  color: var(--md-ink-soft);
}
.md-voices__name { display: block; font-weight: 500; color: var(--md-ink); }

.md-voices__note {
  margin: var(--md-s-24) 0 0;
  font-size: 14px;
  color: var(--md-ink-soft);
}

/* ---------- 6. ledger (editorial numbers) ---------- */

.md-ledger__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--md-s-16);
  margin-top: var(--md-s-40);
}

.md-ledger__cell {
  border: 1px solid var(--md-line);
  border-radius: var(--md-r-panel);
  padding: var(--md-s-24);
  background: var(--md-paper);
}

.md-ledger__num {
  font-family: var(--md-serif);
  font-weight: 700;
  font-size: clamp(44px, 6vw, 64px);
  line-height: 0.96;
  letter-spacing: -0.03em;
  color: var(--md-ink);
}
.md-ledger__num span { color: var(--md-accent); }

.md-ledger__label {
  margin: var(--md-s-12) 0 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--md-ink-soft);
}

/* ---------- 7. signup ---------- */

.md-signup__grid {
  display: grid;
  grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
  gap: var(--md-s-48);
  align-items: start;
}

.md-signup__panel {
  background: var(--md-paper);
  border: 1px solid var(--md-line);
  border-radius: var(--md-r-card);
  padding: var(--md-s-32);
}

.md-signup__field { margin-bottom: var(--md-s-16); }

.md-signup__label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 6px;
}

.md-signup__input {
  width: 100%;
  padding: 14px var(--md-s-16);
  font: inherit;
  font-size: 16px;
  color: var(--md-ink);
  background: var(--md-paper);
  border: 1px solid var(--md-line-strong);
  border-radius: var(--md-r-small);
}
.md-signup__input:focus { border-color: var(--md-accent); outline: none; }

.md-signup__consent {
  display: flex;
  gap: var(--md-s-12);
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.45;
  color: var(--md-ink-soft);
  margin-bottom: var(--md-s-20);
}
.md-signup__consent input {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--md-accent);
  flex: 0 0 auto;
}

.md-signup__note {
  margin: var(--md-s-16) 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--md-ink-soft);
}

.md-signup__done {
  display: none;
  margin-top: var(--md-s-16);
  padding: var(--md-s-16);
  border: 1px solid var(--md-accent);
  border-radius: var(--md-r-small);
  font-size: 15px;
  color: var(--md-ink);
}
.md-signup__done.md-shown { display: block; }

.md-signup__points {
  list-style: none;
  margin: var(--md-s-24) 0 0;
  padding: 0;
}
.md-signup__points li {
  position: relative;
  padding-left: 26px;
  margin-bottom: var(--md-s-12);
  font-size: 16px;
  color: var(--md-ink-soft);
}
.md-signup__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--md-accent);
}

/* ---------- 8. asked (FAQ) ---------- */

.md-asked__list {
  margin-top: var(--md-s-40);
  border-top: 1px solid var(--md-line);
  width: 100%;
}

.md-asked__item { border-bottom: 1px solid var(--md-line); }

.md-asked__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--md-s-16);
  padding: var(--md-s-24) 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--md-ink);
  text-align: left;
  cursor: pointer;
}
.md-asked__q:hover { color: var(--md-accent); }

.md-asked__sign {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--md-line-strong);
  border-radius: 50%;
  color: var(--md-accent);
  transition: transform .2s ease;
}
.md-asked__sign svg { width: 15px; height: 15px; }
.md-asked__item.md-open .md-asked__sign { transform: rotate(45deg); }

.md-asked__a {
  display: none;
  padding: 0 0 var(--md-s-24);
  max-width: 78ch;
  color: var(--md-ink-soft);
  font-size: 16px;
  line-height: 1.55;
}
.md-asked__item.md-open .md-asked__a { display: block; }

/* ---------- 9. plans ---------- */

.md-plans__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--md-s-24);
  margin-top: var(--md-s-40);
  align-items: stretch;
}

.md-plans__tier {
  display: flex;
  flex-direction: column;
  background: var(--md-paper);
  border: 1px solid var(--md-line);
  border-radius: var(--md-r-card);
  padding: var(--md-s-32);
}
.md-plans__tier--pick { border-color: var(--md-accent); }

.md-plans__name {
  font-size: 19px;
  letter-spacing: -0.015em;
}

.md-plans__price {
  margin-top: var(--md-s-12);
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.035em;
  font-weight: 500;
}
.md-plans__per {
  font-size: 15px;
  font-weight: 400;
  color: var(--md-ink-soft);
  letter-spacing: 0;
}

.md-plans__list {
  list-style: none;
  margin: var(--md-s-24) 0 var(--md-s-32);
  padding: 0;
  flex: 1 1 auto;
}
.md-plans__list li {
  position: relative;
  padding-left: 24px;
  margin-bottom: var(--md-s-12);
  font-size: 15px;
  line-height: 1.45;
  color: var(--md-ink-soft);
}
.md-plans__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid var(--md-accent);
}

.md-plans__note {
  margin: var(--md-s-24) 0 0;
  font-size: 14px;
  color: var(--md-ink-soft);
  max-width: 80ch;
}

/* ---------- 10. story (about) ---------- */

.md-story__grid {
  display: grid;
  grid-template-columns: minmax(0, 56fr) minmax(0, 44fr);
  gap: var(--md-s-48);
  align-items: center;
}

.md-story__frame {
  border-radius: var(--md-r-card);
  overflow: hidden;
  border: 1px solid var(--md-line);
  background: var(--md-wash);
  aspect-ratio: 5 / 6;
}
.md-story__frame img { width: 100%; height: 100%; object-fit: cover; }

.md-story__body { font-size: 17px; color: var(--md-ink-soft); }
.md-story__body strong { color: var(--md-ink); font-weight: 500; }

.md-story__list {
  list-style: none;
  margin: var(--md-s-24) 0 0;
  padding: 0;
}
.md-story__list li {
  padding: var(--md-s-16) 0;
  border-top: 1px solid var(--md-line);
  font-size: 16px;
  color: var(--md-ink-soft);
}
.md-story__list li b { color: var(--md-ink); font-weight: 500; }

/* ---------- 11. baseboard (footer) ---------- */

.md-baseboard {
  border-top: 1px solid var(--md-line);
  padding-block: var(--md-s-56) var(--md-s-32);
}

.md-baseboard__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: var(--md-s-32);
}

.md-baseboard__about {
  margin: var(--md-s-16) 0 0;
  font-size: 15px;
  color: var(--md-ink-soft);
  max-width: 34ch;
}

.md-baseboard__title {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--md-ink);
  margin-bottom: var(--md-s-16);
}

.md-baseboard__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.md-baseboard__list li { margin-bottom: 10px; }
.md-baseboard__list a { font-size: 15px; color: var(--md-ink-soft); }
.md-baseboard__list a:hover { color: var(--md-accent); }

.md-baseboard__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--md-s-16);
  justify-content: space-between;
  align-items: center;
  margin-top: var(--md-s-40);
  padding-top: var(--md-s-24);
  border-top: 1px solid var(--md-line);
  font-size: 14px;
  color: var(--md-ink-soft);
}

/* ---------- cookie bar + back to top ---------- */

.md-cookie {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: var(--md-s-16);
  width: min(1080px, calc(100% - 32px));
  background: var(--md-paper);
  border: 1px solid var(--md-line-strong);
  border-radius: var(--md-r-panel);
  box-shadow: rgba(17, 24, 39, 0.16) 0 18px 40px 0;
  padding: var(--md-s-20) var(--md-s-24);
  display: none;
  z-index: 55;
}
.md-cookie.md-shown {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--md-s-16);
  justify-content: space-between;
}

.md-cookie__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--md-ink-soft);
  max-width: 62ch;
}

.md-cookie__acts { display: flex; gap: var(--md-s-8); flex-wrap: wrap; }
.md-cookie__acts .md-act { padding: 10px 20px; font-size: 15px; }

.md-uptop {
  position: fixed;
  right: 20px;
  bottom: 92px;
  width: 46px;
  height: 46px;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--md-paper);
  color: var(--md-ink);
  border: 1px solid var(--md-line-strong);
  border-radius: 50%;
  cursor: pointer;
  z-index: 54;
}
.md-uptop.md-shown { display: flex; }
.md-uptop:hover { border-color: var(--md-accent); color: var(--md-accent); }
.md-uptop svg { width: 18px; height: 18px; }

/* ---------- legal pages ---------- */

.md-paper__head { padding-block: var(--md-s-56) var(--md-s-24); }
.md-paper__stamp { font-size: 14px; color: var(--md-ink-soft); margin-top: var(--md-s-16); }

.md-paper__body { padding-bottom: var(--md-s-72); }
.md-paper__body h2 {
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: var(--md-s-48) 0 var(--md-s-16);
}
.md-paper__body h3 {
  font-size: 19px;
  letter-spacing: -0.015em;
  margin: var(--md-s-24) 0 var(--md-s-8);
}
.md-paper__body p, .md-paper__body li { color: var(--md-ink-soft); max-width: 82ch; }
.md-paper__body ul { padding-left: 20px; margin: 0 0 var(--md-s-16); }
.md-paper__body li { margin-bottom: var(--md-s-8); }

.md-paper__body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
  background: var(--md-wash);
  border: 1px solid var(--md-line);
  border-radius: 6px;
  padding: 1px 6px;
}

.md-paper__back { margin-top: var(--md-s-32); }

/* ---------- responsive ---------- */

@media (max-width: 1024px) {
  .md-nav {
    position: fixed;
    inset: 74px 0 auto 0;
    background: var(--md-paper);
    border-bottom: 1px solid var(--md-line);
    padding: var(--md-s-16) var(--md-s-24) var(--md-s-24);
    display: none;
  }
  .md-nav.md-open { display: block; }
  .md-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .md-nav__link {
    display: block;
    padding: var(--md-s-16) 0;
    border-bottom: 1px solid var(--md-line);
    font-size: 17px;
  }
  .md-nav__link:hover { border-bottom-color: var(--md-line); }
  .md-burger { display: flex; }
  .md-topbar__act { display: none; }
  .md-lede__grid { grid-template-columns: 1fr; gap: var(--md-s-32); }
  .md-lede__tile--drop { transform: none; }
  .md-signup__grid, .md-story__grid { grid-template-columns: 1fr; gap: var(--md-s-32); }
  .md-ledger__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md-baseboard__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .md-shelf__grid { grid-template-columns: 1fr; }
  .md-craft__grid, .md-voices__grid, .md-plans__grid { grid-template-columns: 1fr; }
  .md-story__grid { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  body { font-size: 16px; }
  .md-band { padding-block: var(--md-s-48); }
  .md-shell { padding-inline: var(--md-s-16); }
  .md-shelf__entry { grid-template-columns: 96px minmax(0, 1fr); padding: var(--md-s-16); }
  .md-shelf__icon { width: 52px; height: 52px; }
  .md-shelf__name { font-size: 20px; }
  .md-voices__card, .md-plans__tier, .md-signup__panel { padding: var(--md-s-24); }
  .md-ledger__grid, .md-baseboard__grid { grid-template-columns: 1fr; }
  .md-lede__collage { gap: var(--md-s-8); }
  .md-uptop { bottom: 150px; }
}