/* /match/ (2026-10-14). Tokens: tokens.css. */
.top--solid { position: relative; }
.mt { padding-bottom: 4rem; }
.mt-hero { display: grid; gap: 1rem; align-items: center; padding-top: clamp(2rem, 6vw, 4rem); padding-bottom: 1.5rem; }
.mt-hero h1 { font: 400 var(--t-hero)/.98 var(--display); letter-spacing: -.015em; max-width: 12ch; text-wrap: balance; }
.mt-lead { margin-top: 1rem; max-width: 52ch; color: var(--ink-dim); font-size: var(--t-l); }
.mt-hero__yu { width: min(56vw, 300px); height: auto; justify-self: center; }
@media (min-width: 820px) { .mt-hero { grid-template-columns: 1.4fr .6fr; } .mt-hero__yu { justify-self: end; } }

.mt-form { display: grid; gap: 1rem; padding: clamp(1.2rem, 3vw, 1.8rem); border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--dusk); }
@media (min-width: 820px) { .mt-form { grid-template-columns: 1fr 1fr auto; align-items: end; } .mt-err, .mt-privacy { grid-column: 1 / -1; } }
.mt-field { display: grid; gap: .45rem; }
.mt-field > label { font: italic 400 var(--t-l)/1.2 var(--story); }
.mt-field input[type="date"] { min-height: 52px; padding: .7rem 1rem; border-radius: var(--r-pill); border: 1.5px solid var(--line-2); background: var(--night); color: var(--ink); font: 500 var(--t-m)/1 var(--ui); color-scheme: dark; }
.mt-field input[aria-invalid="true"] { border-color: var(--error); }
.mt-field input:disabled { opacity: .45; }
.mt-form .btn { min-height: 52px; }
.mt-kept label { display: inline-flex; gap: .5rem; align-items: center; min-height: 40px; font-size: var(--t-s); color: var(--ink-dim); cursor: pointer; }
.mt-kept input { width: 20px; height: 20px; accent-color: var(--ember); }
.mt-err { color: var(--error); font-size: var(--t-s); min-height: 1.2em; }
.mt-privacy { color: var(--ink-faint); font-size: var(--t-s); }

.mt-out { padding-top: clamp(2rem, 6vw, 3.5rem); }
.mt-title { font: 400 var(--t-2xl)/1.02 var(--display); text-wrap: balance; }
.mt-title:focus { outline: none; }
.mt-elements { margin-top: .8rem; color: var(--ink-dim); max-width: 64ch; }
.mt-rows { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 900px) { .mt-rows { grid-template-columns: 1fr 1fr; } }
.mt-row { display: grid; gap: .7rem; align-content: start; padding: clamp(1.2rem, 3vw, 1.6rem); border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--dusk); }
.mt-row__t { font: 400 var(--t-xl)/1.1 var(--display); }
.mt-row__s { color: var(--ink-faint); font-size: var(--t-s); }
.mt-row__pair { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.mt-side { display: inline-flex; align-items: baseline; gap: .4rem; }
.mt-side b { font: 400 var(--t-l)/1.2 var(--display); color: var(--gold); }
.mt-side small { color: var(--ink-faint); font-size: var(--t-xs); }
.mt-g { color: var(--gold); }
.mt-row__x { color: var(--ink-faint); font-size: var(--t-s); }
.mt-row__angle { display: inline-flex; align-items: center; gap: .5rem; padding-top: .7rem; border-top: 1px solid var(--line); }
.mt-row__ag { color: var(--ember); font-size: 1.2rem; }
.mt-row__read { font: italic 400 var(--t-l)/1.4 var(--story); }
.mt-row__unknown { color: var(--ink-dim); padding-top: .7rem; border-top: 1px solid var(--line); }
.mt-row__measured { color: var(--silver); font-size: var(--t-s); font-variant-numeric: tabular-nums; }
.mt-note { margin-top: 1.6rem; color: var(--ink-faint); font-size: var(--t-s); max-width: 70ch; }

/* Yu, starry-eyed, floats beside the question (2026-10-15) */
@media (prefers-reduced-motion: no-preference) {
  .mt-hero__yu { animation: mt-float 5s ease-in-out infinite; }
  @keyframes mt-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(2deg); } }
}