/* League Winner — Terms and Privacy.

   These use the full page width like every other page, rather than a narrow
   centred column. At desktop widths that means a two-column reading layout:
   the clause number and heading hold the left rail, the text runs beside it.
   The width is doing real work there — you can scan the left rail for the
   clause you want instead of reading down a single long strip.

   Below 900px there is not enough room for two columns, so it stacks: the
   heading sits above its own text and the page becomes one column. Nothing
   is hidden and nothing is truncated at any width. */

/* Top padding, title size and the space under the head all match
   rankings.html exactly, so landing on Terms from the board does not feel
   like arriving at a different site. */
.legal{
  width:100%;
  padding:clamp(18px,3vh,34px) var(--lw-gutter) clamp(56px,9vh,96px);
}

/* ---------- the head ---------- */
.legal-head{padding-bottom:clamp(18px,3vh,28px);}
.legal h1{
  margin:0;font-size:clamp(34px,6.4vw,84px);font-weight:var(--lw-w-black);
  letter-spacing:-.045em;text-transform:uppercase;line-height:.88;
}
.legal .updated{margin:12px 0 0;font-size:13px;color:var(--lw-ink-45);}
/* The opening paragraph is the one bit of copy that should never run the
   full width of a wide monitor, because it is a single dense block with no
   heading beside it to break the line up. */
.legal .lede{
  margin:20px 0 0;max-width:70ch;
  font-size:clamp(16px,1.3vw,18px);line-height:1.6;color:var(--lw-ink);
}

/* ---------- one clause ---------- */
.sec{
  display:grid;grid-template-columns:1fr;gap:12px;
  padding:clamp(22px,3.2vh,30px) 0;
  border-top:1px solid var(--lw-ink-12);
}
.sec h2{
  margin:0;font-size:15px;font-weight:var(--lw-w-black);
  letter-spacing:.06em;text-transform:uppercase;
}
.sec .body > :first-child{margin-top:0;}
.legal p{margin:14px 0 0;font-size:15.5px;line-height:1.7;color:var(--lw-ink-70);}
.legal ul{margin:14px 0 0;padding-left:20px;}
.legal li{margin:9px 0 0;font-size:15.5px;line-height:1.7;color:var(--lw-ink-70);}
.legal strong{font-weight:var(--lw-w-bold);color:var(--lw-ink);}
.legal .body a{text-decoration:underline;}

/* Wide tables scroll in their own lane rather than widening the page. */
.tablewrap{overflow-x:auto;margin:14px 0 0;}
.legal table{width:100%;border-collapse:collapse;font-size:14.5px;}
.legal th{
  text-align:left;padding:0 14px 8px 0;
  border-bottom:var(--lw-border) solid var(--lw-ink);
  font-size:10px;font-weight:var(--lw-w-black);letter-spacing:.1em;
  text-transform:uppercase;color:var(--lw-ink-45);white-space:nowrap;
}
.legal td{
  padding:12px 14px 12px 0;border-bottom:1px solid var(--lw-ink-12);
  line-height:1.6;color:var(--lw-ink-70);vertical-align:top;
}

/* The other document is always one tap away — the two are read together. */
.legal-next{
  display:block;margin-top:clamp(32px,5vh,56px);padding-top:24px;
  border-top:var(--lw-border) solid var(--lw-ink);
  font-size:14px;font-weight:var(--lw-w-black);
  letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
}
.legal-next:hover{color:var(--lw-red);}

/* ---------- two columns, once there is room for them ---------- */
@media (min-width:900px){
  .sec{
    grid-template-columns:minmax(200px,clamp(200px,20vw,300px)) minmax(0,1fr);
    gap:clamp(28px,4vw,64px);
    align-items:start;
  }
  /* The heading tracks its own clause while you read it, so a long section
     never leaves you scrolling with no idea which one you are in. */
  .sec h2{position:sticky;top:20px;}
}
/* The clause rail keeps growing on big monitors rather than stranding the
   text in a narrow lane with half a screen of white beside it. */
@media (min-width:1500px){
  .sec{grid-template-columns:minmax(300px,22vw) minmax(0,1fr);}
}