/* =====================================================================
   Homepage top — proof section, timeline rail, featured + chapter grid.
   Ported from docs/homepage-top-mockup.html. Everything is scoped under
   .home-top so it never touches the hero, footer, or scenes.css. The
   hero is unchanged and lives outside this wrapper.
   Type: Fraunces display, Inter body, IBM Plex Mono labels/counters.
   ===================================================================== */

.home-top {
  --ink:#1C2E4A; --deep:#12203A; --paper:#F5EFE4; --mount:#E5DBC9;
  --rust:#C14D2E; --slate:#8A9BB0;
  --display:"Fraunces",Georgia,serif;
  --body:"Inter",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-weight:300;
  font-size:1.0625rem;
  line-height:1.65;
}
.home-top *{box-sizing:border-box}
.home-top .wrap{max-width:1240px;margin:0 auto;padding:0 32px}
.home-top .tag{font-family:var(--mono);font-size:0.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--slate)}
.home-top a{color:inherit;text-decoration:none}

/* ---------- PROOF ---------- */
.home-top .proof{padding:88px 0 96px}
.home-top .claim{font-family:var(--display);font-weight:300;font-size:clamp(30px,4.6vw,54px);line-height:1.1;letter-spacing:-.024em;max-width:19ch}
.home-top .claim em{font-style:italic;color:var(--rust)}
.home-top .claim-row{display:grid;grid-template-columns:1fr auto;gap:48px;align-items:end;margin-bottom:52px}
.home-top .claim-note{max-width:34ch;font-size:1rem;color:rgba(28,46,74,.78)}
.home-top .claim-note a{color:var(--rust);border-bottom:1px solid rgba(193,77,46,.42)}

/* before / after slider */
.home-top .reveal{position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;background:var(--ink);cursor:ew-resize;user-select:none;touch-action:none}
.home-top .reveal img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.home-top .reveal .top{clip-path:inset(0 0 0 var(--x,50%))}
.home-top .reveal .handle{position:absolute;top:0;bottom:0;left:var(--x,50%);width:2px;background:var(--paper);z-index:3;pointer-events:none}
.home-top .reveal .knob{position:absolute;top:50%;left:var(--x,50%);transform:translate(-50%,-50%);z-index:4;width:46px;height:46px;border-radius:50%;background:var(--paper);color:var(--ink);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:0.875rem;box-shadow:0 2px 14px rgba(18,32,58,.4);cursor:ew-resize}
.home-top .reveal .lab{position:absolute;bottom:16px;z-index:3;font-family:var(--mono);font-size:0.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--paper);background:rgba(18,32,58,.68);padding:6px 11px;pointer-events:none}
.home-top .reveal .lab.l{left:16px} .home-top .reveal .lab.r{right:16px}
.home-top .caption{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:18px;font-family:var(--mono);font-size:0.7188rem;letter-spacing:.06em;color:var(--slate)}
.home-top .caption b{font-weight:400;color:var(--ink)}
.home-top .caption a{color:var(--rust)}

/* counters */
.home-top .counts{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:64px;border-top:1px solid rgba(28,46,74,.18)}
.home-top .count{padding:30px 20px 0;border-right:1px solid rgba(28,46,74,.12)}
.home-top .count:last-child{border-right:0}
.home-top .count b{display:block;font-family:var(--display);font-weight:300;font-size:clamp(34px,4.6vw,52px);line-height:1;letter-spacing:-.02em;color:var(--ink)}
.home-top .count span{display:block;margin-top:10px;font-family:var(--mono);font-size:0.6562rem;letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
.home-top .count.live b{color:var(--rust)}

/* ---------- timeline rail ---------- */
.home-top .rail-sec{background:var(--ink);color:var(--paper);padding:64px 0 72px}
.home-top .rail-sec .tag{color:rgba(245,239,228,.55);display:block;margin-bottom:26px}
.home-top .rail{position:relative;overflow-x:auto;overflow-y:hidden;padding-bottom:20px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.home-top .rail::-webkit-scrollbar{height:3px}
.home-top .rail::-webkit-scrollbar-thumb{background:rgba(245,239,228,.28)}
.home-top .rail-in{display:flex;gap:0;min-width:max-content;position:relative}
.home-top .rail-in::before{content:"";position:absolute;left:0;right:0;top:33px;height:1px;background:rgba(245,239,228,.22)}
.home-top .stop{position:relative;padding:0 30px 0 0;min-width:132px;display:block}
.home-top .stop .dot{position:relative;z-index:2;width:9px;height:9px;border-radius:50%;background:var(--deep);border:1.5px solid rgba(245,239,228,.5);margin:29px 0 18px;transition:background .2s ease,border-color .2s ease,transform .2s ease}
.home-top .stop:hover .dot,.home-top .stop:focus-visible .dot{background:var(--rust);border-color:var(--rust);transform:scale(1.35)}
.home-top .stop .yr{font-family:var(--display);font-weight:300;font-size:1.3125rem;letter-spacing:-.01em;color:var(--paper)}
.home-top .stop .nm{margin-top:6px;font-family:var(--mono);font-size:0.625rem;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);max-width:110px;line-height:1.5}
.home-top .stop:hover .nm,.home-top .stop:focus-visible .nm{color:rgba(245,239,228,.9)}
.home-top .rail-hint{margin-top:6px;font-family:var(--mono);font-size:0.625rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(245,239,228,.4)}

/* ---------- featured + chapter grid ---------- */
.home-top .chapters{padding:88px 0 96px}
.home-top .chapters .tag{display:block;margin-bottom:28px}
.home-top .feature{display:grid;grid-template-columns:1.1fr .9fr;gap:0;background:var(--ink);color:var(--paper);margin-bottom:24px}
.home-top .feature .art{position:relative;min-height:360px;background-size:cover;background-position:center}
.home-top .feature .art{background-image:linear-gradient(150deg,rgba(36,64,107,.35),rgba(18,32,58,.55) 62%,rgba(193,77,46,.28))}
.home-top .feature .art .pin{position:absolute;top:20px;left:20px;background:var(--rust);font-family:var(--mono);font-size:0.5938rem;letter-spacing:.16em;text-transform:uppercase;padding:6px 11px}
.home-top .feature .txt{padding:52px 46px}
.home-top .feature .kick{font-family:var(--mono);font-size:0.6562rem;letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
.home-top .feature h3{margin-top:16px;font-family:var(--display);font-weight:300;font-size:clamp(30px,3.6vw,42px);line-height:1.06;letter-spacing:-.022em}
.home-top .feature p{margin-top:18px;color:rgba(245,239,228,.78);font-size:1.0625rem;max-width:34ch}
.home-top .feature .go{display:inline-block;margin-top:28px;font-family:var(--mono);font-size:0.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--rust)}

.home-top .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.home-top .card{background:#fff;border:1px solid rgba(28,46,74,.14);padding:0;overflow:hidden;display:flex;flex-direction:column;transition:border-color .2s ease,transform .2s ease}
.home-top .card:hover{border-color:var(--rust);transform:translateY(-2px)}
.home-top .card__img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--ink)}
.home-top .card__body{display:flex;flex-direction:column;flex:1;padding:24px 24px 22px}
.home-top .card .kick{font-family:var(--mono);font-size:0.625rem;letter-spacing:.13em;text-transform:uppercase;color:var(--slate)}
.home-top .card h4{margin-top:12px;font-family:var(--display);font-weight:400;font-size:1.4375rem;line-height:1.14;letter-spacing:-.012em}
.home-top .card p{margin-top:10px;font-size:0.9688rem;color:rgba(28,46,74,.78);flex:1}
.home-top .card .go{margin-top:20px;font-family:var(--mono);font-size:0.6562rem;letter-spacing:.16em;text-transform:uppercase;color:var(--rust)}
.home-top .more{display:block;text-align:center;margin-top:32px;font-family:var(--mono);font-size:0.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--rust);padding:20px;border:1px solid rgba(193,77,46,.3)}
.home-top .more:hover{background:rgba(193,77,46,.06)}

.home-top :focus-visible{outline:2px solid var(--rust);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.home-top *{transition:none!important}}
@media (max-width:960px){
  .home-top .wrap{padding:0 20px}
  .home-top .claim-row{grid-template-columns:1fr;gap:24px;align-items:start}
  .home-top .counts{grid-template-columns:1fr 1fr}
  .home-top .count{border-bottom:1px solid rgba(28,46,74,.12)}
  .home-top .count:nth-child(2){border-right:0}
  .home-top .feature{grid-template-columns:1fr}
  .home-top .feature .art{min-height:220px}
  .home-top .feature .txt{padding:34px 26px 38px}
  .home-top .grid{grid-template-columns:1fr}
}