/* Theme-local tokens and fonts. Keep this page self-contained so it remains stable across Ghost theme revisions. */
:root{
  --paper:#f5f1e7;--paper-2:#fefaf2;--ink:#14201b;--ink-2:#44524a;--ink-3:#5c6862;
  --night:#101e16;--on-night:#f5f1e7;--on-night-dim:#b9c4bc;--gold:#c3a45a;--gold-2:#e4ce92;--rule:#cbbd98;
  --display:LibreCaslonText,Georgia,serif;--copy:LibreCaslonText,Georgia,serif;--fig:Archivo,Arial,sans-serif;
}

@font-face{font-family:LibreCaslonText;src:url('../fonts/libre-caslon-text-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:LibreCaslonText;src:url('../fonts/libre-caslon-text-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Archivo;src:url('../fonts/archivo-latin-wdth-normal.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}

/* Horse-Oracle — How it works (page-methodology.hbs). v1, 2026-10-02. Same hero, bands and type as
   Video Analysis, AI Competition and Start Here. No results figures. Namespace: mt-. */
.mt{color:var(--ink,#14201b);font-family:var(--copy)}
.mt-wrap{max-width:1180px;margin-inline:auto;padding-inline:clamp(20px,4vw,40px)}
.mt :where(h1,h2,h3){font-family:var(--display);font-weight:700;margin:0;letter-spacing:-.005em;color:var(--ink,#14201b)}
.mt :where(p){margin:0}
.mt-h2{font-size:clamp(30px,3vw,40px);line-height:1.1}
.mt-lede{margin-top:14px;font-size:18px;line-height:1.6;color:var(--ink-2,#44524a);max-width:38em}
.mt-label{font-family:var(--fig);font-stretch:var(--fig-wide,92%);font-weight:600;font-size:14px;line-height:1.3;color:var(--ink-3,#5c6862)}
.mt-section{padding-block:clamp(48px,6vw,80px)}
.mt-section--alt{background:var(--paper-2,#fefaf2);border-block:1px solid var(--rule,#cbbd98)}

/* Hero */
.mt-hero{position:relative;min-height:clamp(400px,56vh,600px);display:flex;align-items:flex-end;background:var(--night,#101e16);overflow:hidden}
.mt-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--mt-focus,60% 40%)}
.mt-hero__panel{position:relative;margin-bottom:clamp(28px,5vw,56px);max-width:600px;background:color-mix(in srgb,var(--night,#101e16) 92%,transparent);border-left:3px solid var(--gold,#c3a45a);padding:26px 30px 28px}
.mt-hero h1{color:var(--on-night,#f5f1e7);font-size:clamp(38px,4.3vw,60px);line-height:1.04}
.mt-hero__dek{margin-top:14px;color:var(--on-night,#f5f1e7);font-size:19px;line-height:1.5;max-width:30em}

/* 1. Before and after, with the wall between (night band) */
.mt-wall-band{background:var(--night,#101e16);color:var(--on-night,#f5f1e7);padding-block:clamp(48px,6vw,80px)}
.mt-wall-band .mt-h2{color:var(--on-night,#f5f1e7)}
.mt-wall-band .mt-lede{color:var(--on-night-dim,#b9c4bc)}
.mt-sides{margin-top:44px;display:grid;grid-template-columns:minmax(0,1fr) 120px minmax(0,1fr);align-items:stretch}
.mt-side h3{color:var(--on-night,#f5f1e7);font-size:26px;line-height:1.15}
.mt-side .mt-when{font-family:var(--fig);font-stretch:var(--fig-wide,92%);font-weight:650;font-size:15px;color:var(--gold-2,#e4ce92);margin-bottom:6px}
.mt-steps{list-style:none;margin:20px 0 0;padding:0;counter-reset:s}
.mt-steps li{counter-increment:s;display:grid;grid-template-columns:2.2rem 1fr;gap:12px;padding:14px 0;border-top:1px solid #2c3d33}
.mt-side--after .mt-steps{counter-reset:s 2}
.mt-steps li::before{content:counter(s);font-family:var(--fig);font-stretch:var(--fig-w,78%);font-weight:700;font-size:34px;line-height:.95;color:var(--gold-2,#e4ce92)}
.mt-steps b{display:block;font-family:var(--display);font-size:19px;line-height:1.25;color:var(--on-night,#f5f1e7)}
.mt-steps span{display:block;margin-top:4px;font-size:16px;line-height:1.55;color:var(--on-night-dim,#b9c4bc)}
.mt-wall{position:relative;display:flex;justify-content:center}
.mt-wall::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:6px;transform:translateX(-50%);background:var(--gold,#c3a45a)}
.mt-wall p{position:sticky;top:40%;align-self:center;background:var(--night,#101e16);padding:12px 4px;text-align:center;font-family:var(--fig);font-stretch:var(--fig-wide,92%);font-weight:650;font-size:14px;line-height:1.3;color:var(--gold-2,#e4ce92);max-width:7.5em;z-index:1}
.mt-wall-note{margin-top:28px;font-size:16px;line-height:1.55;color:var(--on-night-dim,#b9c4bc);max-width:46em}

/* 2. The six labels: one tag */
.mt-tag{margin-top:36px;position:relative;background:#fff;border:2px solid var(--ink,#14201b);border-radius:6px 28px 28px 6px;padding:28px 32px 30px 76px}
.mt-tag::before{content:"";position:absolute;left:26px;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;border:2px solid var(--ink,#14201b);background:var(--paper-2,#fefaf2)}
.mt-tag__head{display:flex;justify-content:space-between;gap:16px;align-items:baseline;border-bottom:2px solid var(--ink,#14201b);padding-bottom:12px}
.mt-tag__head b{font-family:var(--display);font-size:22px}
.mt-fields{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:28px}
.mt-fields div{padding:16px 0 14px;border-bottom:1px dashed var(--rule,#cbbd98)}
.mt-fields div:nth-last-child(-n+3){border-bottom:0}
.mt-fields dt{font-family:var(--fig);font-stretch:var(--fig-wide,92%);font-weight:700;font-size:17px}
.mt-fields dd{margin:4px 0 0;font-size:16px;line-height:1.5;color:var(--ink-2,#44524a)}
.mt-aside{margin-top:20px;font-size:16px;line-height:1.55;color:var(--ink-2,#44524a);max-width:46em}

/* 3. When the top choice loses: the sorter */
.mt-sort{margin-top:40px;display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:0;align-items:stretch}
.mt-q{border:2px solid var(--ink,#14201b);padding:20px;display:flex;flex-direction:column;justify-content:center;background:var(--paper,#f5f1e7)}
.mt-q b{font-family:var(--display);font-size:22px;line-height:1.2}
.mt-q span{margin-top:12px;font-size:16px;line-height:1.5;color:var(--ink-2,#44524a)}
.mt-bins{list-style:none;margin:0;padding:0 0 0 36px;position:relative;display:grid;gap:8px}
.mt-bins::before{content:"";position:absolute;left:0;top:50%;width:18px;height:2px;background:var(--ink,#14201b)}
.mt-bins::after{content:"";position:absolute;left:18px;top:28px;bottom:28px;width:2px;background:var(--ink,#14201b)}
.mt-bin{position:relative;display:grid;grid-template-columns:11.5em 1fr;gap:16px;align-items:baseline;padding:13px 16px;background:var(--paper,#f5f1e7);border-left:4px solid var(--ink-3,#5c6862)}
.mt-bin::before{content:"";position:absolute;left:-18px;top:50%;width:14px;height:2px;background:var(--ink,#14201b)}
.mt-bin b{font-family:var(--display);font-size:19px;line-height:1.2}
.mt-bin span{font-size:16px;line-height:1.5;color:var(--ink-2,#44524a)}
.mt-lesson{margin-top:24px;padding:16px 20px;border:1px solid var(--rule,#cbbd98);background:#fff;font-size:17px;line-height:1.55}
.mt-lesson b{font-family:var(--display)}

.mt-tags{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 28px}
.mt-tags li{display:grid;grid-template-columns:9.5em 1fr;gap:12px;align-items:baseline;font-size:16px;line-height:1.5;color:var(--ink-2,#44524a)}
.mt .tag{display:inline-block;font-family:var(--fig);font-stretch:var(--fig-wide,92%);font-weight:650;font-size:14px;line-height:1;padding:6px 10px;border-radius:999px;white-space:nowrap;justify-self:start}
.mt .tag-verified{background:var(--night,#101e16);color:var(--on-night,#f5f1e7)}
.mt .tag-claimed{border:1px solid var(--ink-2,#44524a);color:var(--ink-2,#44524a)}
.mt .tag-video{background:var(--gold-2,#e4ce92);color:var(--ink,#14201b);border:1px solid var(--gold,#c3a45a)}
.mt .tag-inferred{border:1px dashed var(--ink-3,#5c6862);color:var(--ink-2,#44524a);font-style:italic}
.mt .tag-unknown{border:1px dotted var(--ink-2,#44524a);color:var(--ink-2,#44524a)}
.mt .tag-retracted{border:1px solid #b2402f;color:#8f2f22}

/* 4. What a chance means */
.mt-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);margin-top:40px}
.mt-two h3{font-size:24px;line-height:1.2}
.mt-two p{margin-top:10px;font-size:17px;line-height:1.6;color:var(--ink-2,#44524a)}
.mt-waffle{margin-top:20px;display:grid;grid-template-columns:repeat(20,1fr);gap:3px;max-width:420px}
.mt-waffle i{aspect-ratio:1;background:transparent;border:1.5px solid var(--ink-3,#5c6862)}
.mt-waffle i.w{background:var(--ink,#14201b);border-color:var(--ink,#14201b)}
.mt-key{margin-top:10px;display:flex;gap:20px;flex-wrap:wrap}
.mt-key span{display:inline-flex;align-items:center;gap:8px}
.mt-key i{width:12px;height:12px;border:1.5px solid var(--ink-3,#5c6862)}
.mt-key i.w{background:var(--ink,#14201b);border-color:var(--ink,#14201b)}
.mt-same{list-style:none;margin:20px 0 0;padding:0;border-top:2px solid var(--ink,#14201b)}
.mt-same li{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--rule,#cbbd98)}
.mt-same li span{font-size:16px;line-height:1.4}
.mt-same li span:last-child{text-align:right}
.mt-same li b{font-family:var(--fig);font-stretch:var(--fig-wide,92%);font-weight:700;font-size:15px;padding:4px 10px;border:1.5px solid var(--ink,#14201b);border-radius:999px;white-space:nowrap}
.mt-split{margin-top:22px;display:grid;grid-template-columns:7fr 3fr;gap:4px}
.mt-split div{padding:12px 14px;font-family:var(--fig);font-stretch:var(--fig-wide,92%);font-weight:650;font-size:14px;line-height:1.3}
.mt-split div:first-child{background:var(--rule,#cbbd98);color:var(--ink,#14201b)}
.mt-split div:last-child{background:var(--night,#101e16);color:var(--on-night,#f5f1e7)}

/* 5. What this doesn't prove */
.mt-not{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,3vw,32px)}
.mt-not li{padding:20px 0 0;border-top:4px solid var(--ink,#14201b);font-family:var(--display);font-size:21px;line-height:1.3}
.mt-not li small{display:block;margin-top:8px;font-family:var(--copy);font-size:16px;line-height:1.5;color:var(--ink-2,#44524a)}

.mt a:focus-visible{outline:3px solid var(--gold,#c3a45a);outline-offset:3px}

@media (max-width:899px){
  .mt-sides{grid-template-columns:1fr}
  .mt-wall{height:72px}
  .mt-wall::before{top:50%;bottom:auto;left:0;right:0;width:auto;height:6px;transform:translateY(-50%)}
  .mt-wall p{position:relative;top:auto;max-width:none;padding:6px 12px}
  .mt-fields{grid-template-columns:1fr 1fr}
  .mt-fields div:nth-last-child(-n+3){border-bottom:1px dashed var(--rule,#cbbd98)}
  .mt-fields div:nth-last-child(-n+2){border-bottom:0}
  .mt-sort{grid-template-columns:1fr}
  .mt-bins{padding:28px 0 0 22px}
  .mt-bins::before{left:22px;top:0;width:2px;height:28px}
  .mt-bins::after{left:4px;top:28px;bottom:24px}
  .mt-bin::before{left:-18px}
  .mt-tags,.mt-two,.mt-not{grid-template-columns:1fr}
}
@media (max-width:640px){
  .mt-hero{min-height:440px}
  .mt-hero__panel{padding:22px 22px 24px}
  .mt-hero__dek{font-size:17px}
  .mt-tag{padding:56px 20px 22px;border-radius:24px 24px 6px 6px}
  .mt-tag::before{left:50%;top:18px;margin:0 0 0 -11px}
  .mt-fields{grid-template-columns:1fr}
  .mt-fields div:nth-last-child(-n+2){border-bottom:1px dashed var(--rule,#cbbd98)}
  .mt-fields div:last-child{border-bottom:0}
  .mt-bin{grid-template-columns:1fr;gap:4px}
  .mt-tags li{grid-template-columns:1fr;gap:6px}
  .mt-same li{grid-template-columns:1fr;text-align:left}
  .mt-same li span:last-child{text-align:left}
  .mt-same li b{justify-self:start}
}
@media (max-width:899px){
  .mt-bins{padding:12px 0 0}
  .mt-bins::before,.mt-bins::after,.mt-bin::before{display:none}
}