/* ---------- WMRL project page ---------- */

:root {
  /* --- neutrals --- */
  --ink:        #131720;
  --ink-soft:   #4b5565;
  --ink-faint:  #7a8494;
  --rule:       #e3e7ed;
  --rule-soft:  #eef1f5;
  --bg:         #ffffff;
  --tint:       #f5f7fa;
  --tint-cool:  #eef2f7;

  /* --- brand --- */
  --navy:       #13294b;
  --navy-deep:  #0c1d36;
  --navy-mid:   #24406b;
  --orange:     #e8580a;
  --orange-hi:  #ff6b17;
  --green:      #1a6d35;
  --red:        #a53131;

  /* --- data-viz roles --- */
  --surface-1:  #ffffff;
  --series-real: #2f5e8c;
  --series-ours: #e8580a;
  --series-wm:   #708db0;
  --series-ctx:  #b3c0d0;
  --grid:        #e8ebf0;

  --maxw:    1080px;

  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --display: "Source Serif 4", Charter, "Bitstream Charter", Georgia, serif;
  --mono:  "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  --serif: "Cambria Math", "Latin Modern Math", Georgia, "Times New Roman", serif;

  --shadow-sm: 0 1px 2px rgba(11, 27, 51, .05), 0 1px 3px rgba(11, 27, 51, .04);
  --shadow-md: 0 6px 18px rgba(11, 27, 51, .08), 0 1px 3px rgba(11, 27, 51, .05);
  --shadow-lg: 0 18px 48px rgba(11, 27, 51, .12), 0 2px 8px rgba(11, 27, 51, .06);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17.5px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

a { color: var(--navy); text-decoration: none; border-bottom: 1px solid rgba(19,41,75,.26); }
a:hover { border-bottom-color: var(--orange); color: var(--orange); }

/* ---------- sticky nav ---------- */

.nav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transform: translateY(-100%); opacity: 0;
  transition: transform .28s ease, opacity .28s ease, border-color .28s ease;
}
.nav.show { transform: translateY(0); opacity: 1; border-bottom-color: var(--rule); }
.nav .wrap { display: flex; align-items: center; gap: 24px; height: 56px; }
.nav .mark {
  font-family: var(--display);
  font-weight: 700; letter-spacing: .01em; font-size: 18px; color: var(--navy);
}
.nav .links { display: flex; gap: 22px; margin-left: auto; }
.nav a { border-bottom: none; font-size: 14.5px; color: var(--ink-soft); font-weight: 500; }
.nav a:hover { color: var(--orange); }

@media (max-width: 760px) { .nav .links { display: none; } }

/* ---------- header ---------- */

header {
  position: relative;
  padding: 74px 0 4px;
  text-align: center;
  overflow: hidden;
  background:
    linear-gradient(180deg, var(--tint-cool) 0%, rgba(242,245,249,.35) 55%, #fff 100%);
}
header::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 5px;
  background: var(--orange);
}
header .wrap { position: relative; z-index: 1; }

.badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 15px 5px 11px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-sm);
  font-size: 12.5px; font-weight: 550; color: var(--ink-soft);
  letter-spacing: .02em; margin-bottom: 26px;
}
.badge .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--orange); box-shadow: 0 0 0 3px rgba(19,41,75,.10);
}
.badge a { border-bottom: none; color: inherit; font-weight: 650; }
.badge a:hover { color: var(--orange); }

h1.title {
  font-family: var(--display);
  font-size: clamp(34px, 5.1vw, 60px);
  line-height: 1.08;
  letter-spacing: -0.018em;
  font-weight: 600;
  margin: 0 0 20px;
  color: var(--navy);
  text-wrap: balance;
}
h1.title .accent { color: var(--orange); }

.authors {
  font-size: 16.5px; line-height: 1.85;
  margin: 0 auto 12px; max-width: 880px; color: var(--ink-soft);
}
.authors a { border-bottom: none; color: var(--ink); font-weight: 600; }
.authors a:hover { color: var(--orange); }
.authors sup, .affil sup { font-size: 10.5px; color: var(--orange); font-weight: 700; }

.au { display: inline-block; white-space: nowrap; margin-right: 4px; }

.affil { font-size: 15px; color: var(--ink-faint); margin: 0 0 4px; }
.affil .au { margin: 0 13px; }
.note { font-size: 13px; color: var(--ink-faint); margin: 8px 0 0; }

.logos {
  display: flex; align-items: center; justify-content: center;
  gap: 34px; margin: 30px 0 2px; flex-wrap: wrap;
}
.logos img {
  height: 38px; width: auto;
  opacity: .82; transition: opacity .2s ease;
}
.logos:hover img { opacity: 1; }

/* ---------- buttons ---------- */
/* Each destination carries its own colour and mark, so the row reads as five
   different places rather than five copies of one. Light by default with the
   brand as the ink; the brand fills in on hover, which keeps the row quiet
   until you reach for it. */

.buttons {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center; margin: 32px 0 54px;
}

.btn {
  --brand: var(--navy);
  --brand-ink: #fff;
  --brand-edge: #cdd4de;

  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px; border-radius: 10px;
  background: #fff;
  color: var(--brand);
  font-size: 15px; font-weight: 600; letter-spacing: .005em;
  border: 1px solid var(--brand-edge);
  box-shadow: var(--shadow-sm);
  transition: background .16s, border-color .16s, color .16s,
              transform .14s, box-shadow .16s;
}
.btn:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-ink);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.btn svg { width: 17px; height: 17px; flex: none; }
.btn .emoji { font-size: 17px; line-height: 1; filter: saturate(1.05); }

.btn-arxiv  { --brand: #b31b1b; --brand-edge: #e8c4c4; }
.btn-pdf    { --brand: #475569; --brand-edge: #cfd6e0; }
.btn-github { --brand: #24292f; --brand-edge: #ccd1d8; }
.btn-hf     { --brand: #c2740a; --brand-edge: #f0d59b; --brand-ink: #fff; }
.btn-cite   { --brand: var(--navy); --brand-edge: #cdd4de; }

/* Not live yet: dashed, and it does not lift or fill. It keeps its colour so
   the row still reads as five destinations rather than four and a gap. */
.btn.soon {
  border-style: dashed;
  box-shadow: none;
  cursor: default;
  pointer-events: none;
  opacity: .75;
}
.btn.soon:hover { background: #fff; color: var(--brand); transform: none; }
.btn.soon .tag-soon {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 5px;
  background: color-mix(in srgb, var(--brand) 12%, #fff);
  color: var(--brand);
}

@media (max-width: 540px) {
  .btn { padding: 10px 15px; font-size: 14px; }
}

/* ---------- sections ---------- */

section { padding: 78px 0; }
section.alt { background: var(--tint); }
section + section:not(.alt):not(.statband) { border-top: 1px solid var(--rule-soft); }

.h2row { display: flex; align-items: center; gap: 14px; margin: 0 0 26px; }
.h2row .no {
  font-family: var(--mono);
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em;
  color: #fff;
  background: var(--navy);
  border-radius: 6px; padding: 4px 9px;
}
h2 {
  font-family: var(--display);
  font-size: clamp(26px, 2.6vw, 34px);
  letter-spacing: -0.012em; font-weight: 600;
  margin: 0; color: var(--navy);
}
h3 { font-size: 18.5px; font-weight: 650; margin: 40px 0 10px; color: var(--ink); }

p { margin: 0 0 17px; }
p:last-child { margin-bottom: 0; }


.lead {
  font-size: 19.5px; line-height: 1.6; color: var(--ink);
  letter-spacing: -.004em;
}
.abstract { font-size: 17px; line-height: 1.75; color: var(--ink-soft); }
.abstract b { color: var(--ink); font-weight: 640; }

/* ---------- figures as cards ---------- */

figure {
  margin: 0 0 8px;
  background: var(--tint);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 0;
  overflow: hidden;
}
figure img {
  width: 100%; height: auto; display: block;
  background: #fff;
  border: 0;
  border-radius: 0;
}
.figscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; background: #fff; }
@media (max-width: 760px) {
  .figscroll img { min-width: 640px; }
}
figcaption {
  font-size: 14.5px; line-height: 1.62; color: var(--ink-soft);
  margin: 0; padding: 17px 24px 19px;
  border-top: 1px solid var(--rule);
  background: var(--tint);
  text-align: left;
}
figcaption b { color: var(--ink); font-weight: 640; }
figcaption .fignum {
  display: inline-block;
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--orange); margin-right: 9px;
}

.teaser { padding: 54px 0 0; }
.teaser figure { box-shadow: var(--shadow-md); }
.alt figcaption { background: #fff; }

/* ---------- stat band ---------- */

.statband {
  background: var(--navy-deep);
  color: #fff;
  padding: 52px 0;
  position: relative;
}
.statband::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--orange);
}
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.stat { position: relative; padding-left: 18px; }
.stat::before {
  content: ""; position: absolute; left: 0; top: 4px; bottom: 4px;
  width: 3px; border-radius: 2px;
  background: var(--orange);
}
/* the plain-language label above the figure: without it the cards are four
   bare numbers and a reader has to hunt for what each one measures */
.stat .t {
  display: block;
  font-size: 12.5px; font-weight: 650;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--orange-hi);
  margin-bottom: 8px;
}
.stat .k {
  display: block;
  font-family: var(--display);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 600; line-height: 1.05; letter-spacing: -.02em;
  color: #fff; font-variant-numeric: tabular-nums;
}
/* a card whose figure is a phrase rather than a numeral needs less size */
.stat .k.k-text { font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -.01em; }
.stat .lbl {
  display: block; margin-top: 10px;
  font-size: 14px; line-height: 1.5; color: #a9b7cc;
}
.stat .lbl b { color: #e6ecf5; font-weight: 600; }

/* ---------- method cards ---------- */

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 30px; }

.card {
  position: relative;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--orange);
  border-radius: 12px;
  padding: 22px 24px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform .16s ease, box-shadow .16s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.card h4 {
  margin: 0 0 8px; font-size: 18px; font-weight: 650;
  color: var(--navy); font-family: var(--display); letter-spacing: -.005em;
}
.card p { font-size: 15.5px; color: var(--ink-soft); margin: 0; line-height: 1.62; }
.card .tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--orange); margin-bottom: 8px;
}

/* inline math */
.math {
  font-family: var(--serif); font-style: italic;
  font-size: 1.07em; letter-spacing: .01em; white-space: nowrap;
}
.math sub, .math sup { font-size: .72em; }

/* ---------- theorem blocks ---------- */

.thm {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 22px 26px 20px;
  margin: 24px 0 0;
  box-shadow: var(--shadow-sm);
}
.thm + .thm { margin-top: 16px; }
.thm.thm-ours { border-left: 3px solid var(--orange); }
.thm-tag {
  display: block;
  font-family: var(--mono);
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-faint);
}
.thm.thm-ours .thm-tag { color: var(--orange); }
.thm h4 {
  margin: 7px 0 0;
  font-family: var(--display);
  font-size: 20px; font-weight: 600; letter-spacing: -.005em; color: var(--navy);
}
.thm p { font-size: 15.5px; line-height: 1.62; color: var(--ink-soft); margin: 0; }
.thm p b { color: var(--ink); font-weight: 640; }

/* the heading qualifier that says which arm this theorem describes */
.thm h4 .qual { color: var(--ink-faint); font-weight: 500; }
.thm.thm-ours h4 .qual { color: var(--orange); }

/* rendered maths: glyphs are paths, so these scale without a font dependency.
   The frame mirrors the thmbox the paper puts each theorem in (remarkblue,
   RGB 31 78 140, at 7% fill against a 90% rule). */
.eq {
  margin: 18px 0 16px;
  padding: 15px 18px;
  border: 1px solid rgba(31, 78, 140, .5);
  border-radius: 8px;
  background: rgba(31, 78, 140, .055);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.thm-ours .eq {
  border-color: rgba(232, 88, 10, .45);
  background: rgba(232, 88, 10, .05);
}
.eq img { display: block; margin: 0 auto; max-width: 100%; height: auto; }
.eq-inline { display: inline-block; padding: 0 2px; }
.eq-inline img { height: 21px; width: auto; vertical-align: -4px; max-width: 100%; }
.den { margin: 2px 0 10px; }
.den img { display: block; height: 22px; width: auto; max-width: 100%; }

@media (max-width: 620px) {
  .thm { padding: 18px 16px 16px; }
  .eq { padding: 12px 12px; }
}

/* ---------- charts ---------- */

.chart {
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: var(--surface-1);
  padding: 0 0 16px;
  margin: 10px 0 12px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.chart .chart-head {
  margin: 0; padding: 20px 24px 16px;
  background: var(--tint);
  border-bottom: 1px solid var(--rule);
}
.chart .chart-title {
  font-family: var(--display);
  font-size: 19px; font-weight: 600; color: var(--navy); margin: 0 0 4px;
  letter-spacing: -.008em; max-width: none;
}
.chart .chart-sub { font-size: 14px; color: var(--ink-soft); margin: 0; line-height: 1.5; }

.chart .legend {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  margin: 0; padding: 14px 24px 4px;
  font-size: 13.5px; color: var(--ink-soft);
}
.chart .legend span { display: inline-flex; align-items: center; gap: 7px; }
.chart .legend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; flex: none; }

.plotwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 0 14px; }
.chart .plot { width: 100%; height: auto; display: block; }
.chart svg text { font-family: var(--sans); }
.chart .chart-note { font-size: 13.5px; color: var(--ink-faint); margin: 0; padding: 8px 24px 0; line-height: 1.55; }

@media (max-width: 800px) { .chart .plot { min-width: 660px; } }

.tick-line   { stroke: var(--grid); stroke-width: 1; }
.axis-line   { stroke: #ccd3dd; stroke-width: 1; }
.tick-label  { fill: #8b93a0; font-size: 11px; }
.axis-title  { fill: #6d7583; font-size: 11.5px; font-weight: 500; }
.panel-title { fill: var(--navy); font-size: 13px; font-weight: 650; }
.group-label { fill: var(--ink-soft); font-size: 12px; font-weight: 550; }
.val-label   { fill: #6d7583; font-size: 10.5px; font-variant-numeric: tabular-nums; }
.val-label.hi{ fill: var(--ink); font-weight: 700; }
.pt-label    { fill: var(--ink-soft); font-size: 11.5px; font-weight: 600; }
.pt-label.pt-ours { fill: var(--orange); font-size: 12.5px; font-weight: 700; }
.pt-label.pt-soft { fill: #8b97a8; font-weight: 550; }
.zone-label  { fill: #8794a6; font-size: 10.5px; font-weight: 600; letter-spacing: .01em; }
.lift        { stroke: var(--orange); stroke-width: 2.2; fill: none; opacity: .9; }
.cut-gain    { fill: var(--green); font-weight: 700; }
.ref-line    { stroke: #b9c0cb; stroke-width: 1; }
.ref-label   { fill: #8b93a0; font-size: 10.5px; }
.cut-label   { fill: var(--orange); font-size: 12px; font-weight: 700; }
.gain-label  { fill: var(--green); font-size: 11.5px; font-weight: 600; }
.connector   { stroke: #c3c9d2; stroke-width: 1.5; fill: none; }

.hit { fill: transparent; cursor: pointer; }
.mark { transition: opacity .12s ease; }
.chart.dim .mark:not(.on) { opacity: .34; }

/* tooltip */
#tip {
  position: fixed; z-index: 60; pointer-events: none; opacity: 0;
  transform: translate(-50%, -100%);
  transition: opacity .1s ease;
  background: var(--navy-deep); color: #fff;
  border-radius: 8px; padding: 8px 11px;
  font-size: 12.5px; line-height: 1.45; white-space: nowrap;
  box-shadow: 0 8px 24px rgba(11,27,51,.28);
}
#tip.on { opacity: 1; }
#tip .t-name { font-weight: 650; display: flex; align-items: center; gap: 6px; }
#tip .t-name i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
#tip .t-val { color: #b7c2d3; }

/* ---------- tables ---------- */

.tablewrap {
  overflow-x: auto;
  margin: 6px 0 14px;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: #fff;
}

table {
  border-collapse: collapse;
  width: 100%; min-width: 720px;
  font-size: 14.5px;
  font-variant-numeric: tabular-nums;
}

table th, table td { padding: 9px 10px; text-align: center; white-space: nowrap; }
table th { font-weight: 640; color: var(--navy); }

thead { background: var(--tint); }
thead tr:first-child th { border-top: none; }
thead tr:last-child th  { border-bottom: 1px solid var(--rule); }
tbody tr:last-child td  { border-bottom: none; }
tbody tr { border-bottom: 1px solid var(--rule-soft); }
tbody tr:hover td { background: rgba(47,109,164,.05); }

th.spangroup { border-bottom: 1px solid var(--rule); font-weight: 640; }
td.method, th.method { text-align: left; padding-left: 18px; }

tr.grouphead td {
  background: var(--tint-cool);
  text-align: left;
  font-weight: 700; font-size: 12px;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--navy-mid);
  padding: 7px 18px;
}
tr.grouphead:hover td { background: var(--tint-cool); }

tr.ours td { background: rgba(19, 41, 75, .055); }
tr.ours:hover td { background: rgba(19, 41, 75, .085); }
tr.ours td.method { font-weight: 650; color: var(--navy); }
tr.ours td:first-child { box-shadow: inset 3px 0 0 var(--orange); }

td b, th b { font-weight: 700; }

.up   { color: var(--green); font-size: 11.5px; font-weight: 700; margin-left: 2px; }
.down { color: var(--red);   font-size: 11.5px; font-weight: 500; margin-left: 2px; }
.sep  { border-left: 1px solid var(--rule); }

.tabnote { font-size: 13.5px; color: var(--ink-faint); line-height: 1.6; margin: 0 0 26px; }
.tabnote b { color: var(--ink-soft); }

.tabtitle { font-size: 15.5px; color: var(--ink-soft); margin: 38px 0 12px; }
.tabtitle b { color: var(--navy); font-weight: 650; }

/* ---------- vla strip ---------- */

.strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 6px; }
.strip img {
  width: 100%; height: auto;
  border-radius: 10px;
  border: 1px solid var(--rule);
  display: block;
}

/* ---------- bibtex ---------- */

pre.bibtex {
  background: var(--navy-deep);
  border: 1px solid var(--navy-deep);
  border-radius: 14px;
  padding: 22px 24px;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 13.5px; line-height: 1.65;
  color: #dbe3ef;
  margin: 0;
  box-shadow: var(--shadow-sm);
}

/* ---------- footer ---------- */

footer {
  padding: 40px 0 68px;
  text-align: center;
  font-size: 13.5px; color: var(--ink-faint);
  border-top: 1px solid var(--rule-soft);
}
footer a { color: var(--ink-faint); }

/* ---------- scroll reveal ---------- */

.reveal { opacity: 0; transform: translateY(14px); }
.reveal.in { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s ease; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal.in { opacity: 1; transform: none; transition: none; }
  .stat, .card, .btn { transition: none; }
}

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

@media (max-width: 940px) {
  body { font-size: 16px; }
  header { padding-top: 52px; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 26px; }
  .two-col { grid-template-columns: 1fr; }
  .strip { grid-template-columns: repeat(2, 1fr); }
  .logos { gap: 26px; }
  .logos img { height: 32px; }
  section { padding: 54px 0; }
  .statband { padding: 40px 0; }
  figure { padding: 16px 16px 0; }
  figcaption { margin: 0 -16px; padding: 14px 16px 16px; }
  .chart .chart-head { padding: 16px 16px 13px; }
  .chart .legend { padding: 12px 16px 4px; }
}

@media (max-width: 560px) {
  .stats { grid-template-columns: 1fr; }
  .buttons { gap: 8px; }
  .btn { padding: 10px 16px; font-size: 14px; }
  .wrap { padding: 0 18px; }
  .lead { font-size: 17.5px; }
}