/* hub.css — the landing that indexes the experiments.
   Rides style.css's tokens; adds only what an index page needs. */

.hub{padding-bottom:64px}
.hubhead{padding:44px 0 8px;max-width:72ch}
.hubhead h1{font-size:clamp(2rem,5vw,3rem);line-height:1.08;margin:0 0 16px;letter-spacing:-.02em}
.lede{font-size:1.05rem}
.hub section{margin-top:40px}
.secttl{font-size:1.15rem;margin:0 0 6px;letter-spacing:-.01em}
.sectsub{margin:0 0 14px}

/* The experiment cards. A linked card is a whole click target; an unlinked one
   (`.flat`) must not pretend to be, so it gets no hover and no arrow. */
.cards{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-top:14px}
.expt{display:block;background:var(--paper);border:1px solid var(--line);border-radius:12px;
  padding:16px 18px;color:inherit;border-bottom:1px solid var(--line)}
a.expt{transition:border-color .12s,transform .12s}
a.expt:hover,a.expt:focus-visible{border-color:var(--accent);transform:translateY(-1px)}
a.expt h3::after{content:" →";color:var(--accent);font-weight:400}
.expt.flat{background:transparent;border-style:dashed}
.expt h3{margin:.3rem 0 .5rem;font-size:1.02rem;letter-spacing:-.01em}
.expt p{margin:0 0 .6rem;font-size:.86rem;color:var(--ink-2);line-height:1.5}
.expt p:last-child{margin-bottom:0}
.ekind{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3)}
.efind{border-top:1px solid var(--line-2);padding-top:.6rem;color:var(--ink-2)}
.efind b{color:var(--ink)}

/* Findings blocks. */
.card{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:20px 22px}
.finding .prose{margin:0 0 12px}
.rules{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin:14px 0}
.rule{background:var(--accent-soft);border-radius:10px;padding:13px 15px}
.rule h4{margin:0 0 .4rem;font-size:.9rem}
.rule p{margin:0;font-size:.84rem;color:var(--ink-2);line-height:1.5}
.shapettl{font-size:.95rem;margin:22px 0 8px}

/* The shape table is the densest thing here, so it scrolls rather than
   squeezing its own columns into unreadability on a phone. */
.shapes{width:100%;border-collapse:collapse;font-size:.8rem;display:block;overflow-x:auto;
  white-space:normal}
.shapes th{text-align:left;font-weight:600;color:var(--ink-3);font-size:.72rem;
  text-transform:uppercase;letter-spacing:.08em;padding:6px 10px 6px 0;border-bottom:1px solid var(--line)}
.shapes td{padding:8px 10px 8px 0;border-bottom:1px solid var(--line-2);color:var(--ink-2);
  vertical-align:top;min-width:120px}
.shapes td:first-child{color:var(--ink);min-width:132px}
.shapes td:last-child{min-width:230px}

.facts{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin-top:12px}
.fact .num{font-family:var(--mono);font-size:1.7rem;color:var(--accent);line-height:1.1}
.fact p{margin:.4rem 0 0;font-size:.82rem;color:var(--ink-2);line-height:1.5}
.cap{font-size:.84rem;color:var(--ink-3)}
.hubfoot{margin-top:40px;padding-top:18px;border-top:1px solid var(--line)}
.hubfoot p{font-size:.82rem;margin:0 0 8px}