/* ══════════════════════════════════════════════════════════════════════════
   Mualo — The method. Ported from the Claude Design canvas (Method.dc.html):
   six ideas in an auto-fitting grid, then the papers they come from. The
   canvas carried its styles inline on every element; they live here instead,
   the way the rest of the site is written. Header, .eyebrow, .btn and
   .minifoot come from landing.css and tokens.css.
   ══════════════════════════════════════════════════════════════════════ */

.mt-page {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

.mt {
  flex: 1;
  display: flex; flex-direction: column;
  padding: 40px var(--gutter) 0;
}

.mt-eyebrow { margin-bottom: 30px; }
.mt-inner { max-width: 1560px; width: 100%; }

.mt-title {
  margin: 0 0 8px;
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(38px, 5.4vw, 74px); line-height: 1.02;
  letter-spacing: -0.03em;
}
.mt-lede {
  margin: 0 0 44px; max-width: 62ch;
  font-family: var(--font-body); font-size: 17px; line-height: 1.6;
  color: var(--color-neutral-700); text-wrap: pretty;
}

/* ── the six ideas ──────────────────────────────────────────────────────
   auto-fit rather than a fixed count: the row breaks to two columns and
   then to one on its own, which is why this page needs no breakpoint of
   its own until the papers table below. */

.mt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  column-gap: 64px;
}
.mt-idea { border-top: 2px solid var(--color-divider); padding: 18px 0 32px; }
.mt-idea-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 10px; }
.mt-idea-num {
  font-family: var(--font-heading); font-weight: 800;
  font-size: 12px; letter-spacing: 1.4px; color: var(--color-accent-700);
}
.mt-idea-title {
  margin: 0;
  font-family: var(--font-heading); font-weight: 800;
  font-size: 22px; line-height: 1.2; letter-spacing: -0.02em;
}
.mt-idea-body {
  margin: 0;
  font-family: var(--font-body); font-size: 16px; line-height: 26px;
  color: var(--color-neutral-700); text-wrap: pretty;
}

/* ── the papers ─────────────────────────────────────────────────────────
   Citation left, the ideas it backs right, on one ruled row each. */

.mt-papers { margin-top: 24px; }
.mt-papers-eyebrow { margin-bottom: 26px; }

.mt-paper-list { list-style: none; margin: 0; padding: 0; max-width: 1100px; }
.mt-paper {
  border-top: 2px solid var(--color-divider);
  padding: 16px 0 18px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px 28px; align-items: baseline;
}
.mt-paper:last-child { border-bottom: 2px solid var(--color-divider); }
.mt-paper-cite {
  margin: 0;
  font-family: var(--font-body); font-size: 15px; line-height: 24px;
  color: var(--color-neutral-800); text-wrap: pretty;
}
.mt-paper-lead { font-family: var(--font-heading); font-weight: 800; }
.mt-paper-doi {
  font-family: var(--font-heading); font-weight: 600; font-size: 13px;
  white-space: nowrap;
}
.mt-paper-ideas {
  font-family: var(--font-heading); font-weight: 600;
  font-size: 11px; letter-spacing: 1.4px;
  color: var(--color-neutral-600); white-space: nowrap;
}

/* ── close ──────────────────────────────────────────────────────────────  */

.mt-cta {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 48px 0 8px;
}
.mt-btn { padding: 12px 20px; font-size: 14px; white-space: nowrap; }
.mt-btn-ghost { padding: 12px 8px; }

/* Holds the copy off the footer when the viewport is tall. */
.mt-spacer { flex: 0 1 auto; min-height: 32px; }

/* ── entry ──────────────────────────────────────────────────────────────
   The masthead only. The ideas are below the fold on most screens and are
   left alone, so nothing animates as you scroll into it. */

@keyframes mt-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes mt-rule { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.mt-eyebrow .eyebrow-num { opacity: 0; animation: mt-fade 600ms cubic-bezier(.16, 1, .3, 1) 60ms both; }
.mt-rule { transform-origin: left center; animation: mt-rule 900ms cubic-bezier(.16, 1, .3, 1) 120ms both; }
.mt-eyebrow .eyebrow-ar { opacity: 0; animation: mt-fade 600ms cubic-bezier(.16, 1, .3, 1) 200ms both; }
.mt-title { opacity: 0; animation: mt-fade 700ms cubic-bezier(.16, 1, .3, 1) 180ms both; }
.mt-lede { opacity: 0; animation: mt-fade 700ms cubic-bezier(.16, 1, .3, 1) 260ms both; }

/* ── responsive ─────────────────────────────────────────────────────────  */

@media (max-width: 720px) {
  /* The "→ IDEA #n" marker is nowrap and would push the citation to a
     two-word column, so it moves under the citation instead. */
  .mt-paper { grid-template-columns: 1fr; gap: 10px; }
  .mt { padding-top: 24px; }
  .mt-eyebrow { margin-bottom: 22px; }
  .mt-lede { margin-bottom: 32px; }
  .mt-cta { margin-top: 36px; }
}

@media (max-width: 520px) {
  .mt-btn { flex: 1 1 100%; }
  .mt-btn-ghost { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  [data-anim] { animation: none !important; transform: none !important; opacity: 1 !important; }
}