/* Sponsorship page: block dividers and the smaller "What sport does" cards (both chosen 2026-10-09).
   Each block after the first screen opens with a thin brand-gradient rule and a glowing point, so the page reads as a run of blocks. */
#why,#process,section.end,.sheet{position:relative}

/* how a block is set apart from the one above, four treatments to compare (?dv=a|b|c|d, /assets/divide.js) */
/* A · pitch line: a chalk halfway line with the centre circle and spot, faint */
body[data-dv="a"] :is(#why,#process,section.end)::before{content:"";position:absolute;left:0;right:0;top:clamp(36px,4.5vw,64px);height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.13) 12%,rgba(255,255,255,.13) 88%,transparent);pointer-events:none}
body[data-dv="a"] :is(#why,#process,section.end)::after{content:"";position:absolute;left:50%;top:clamp(36px,4.5vw,64px);width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;pointer-events:none;
  border:1px solid rgba(255,255,255,.11);background:radial-gradient(circle,rgba(255,255,255,.35) 0 2.5px,transparent 3.5px);
  -webkit-mask:linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0)}

/* B · chapter: a neutral hairline with the chapter's number and name on the left and the page's name on the right, as in a printed report */
.chap{display:none}
body[data-dv="b"] .chap{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding-top:14px;margin-bottom:clamp(36px,4vw,56px);border-top:1px solid rgba(255,255,255,.12);
  font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.45)}
body[data-dv="b"] .chap b{font-weight:700;color:#fff;font-variant-numeric:tabular-nums;margin-right:14px}
body[data-dv="b"] .chap b+span{color:rgba(255,255,255,.8)}
body[data-dv="b"] #why>.eyebrow{display:none}
body[data-dv="b"] :is(#why,#process){padding-top:clamp(56px,7vw,96px)}

/* C · sheets: no lines; each block lies on its own sheet, a shade lighter, with a rounded top edge that slides over the block above */
body[data-dv~="c"] :is(#why,#process,section.end,.sheet){isolation:isolate;margin-top:clamp(24px,3vw,40px)}
body[data-dv~="c"] :is(#why,#process,section.end,.sheet)::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);pointer-events:none;
  border-radius:clamp(28px,3vw,44px) clamp(28px,3vw,44px) 0 0;border-top:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,#0e0809,#080506 280px,#050505 70%);box-shadow:0 -40px 80px -40px rgba(0,0,0,1)}
body[data-dv~="c"] section.end::before{background:linear-gradient(180deg,#130709,#0a0506 280px,#050505)}

/* D · brand seam: a narrow band of the brandbook's light lines, fading out at both ends */
.seam{display:none}
body[data-dv~="d"] .seam{display:block;position:absolute;left:0;right:0;top:clamp(10px,2vw,28px);height:clamp(56px,6vw,84px);pointer-events:none;
  -webkit-mask:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}
body[data-dv~="d"] .seam canvas{width:100%;height:100%;display:block}

/* smaller "What sport does" cards: lower and tighter, the same 3 × 2 layout, so all six fit on one screen (scoped to #why so it outranks the page's inline styles, which load later) */
#why .gl .grid{gap:16px}
#why .gl .face.card{min-height:196px}
#why .gl .card{padding:18px 20px 16px;border-radius:24px}
#why .gl .front .emblem{width:50px;height:50px;margin-top:8px}
#why .gl .front .emblem .ico{width:22px;height:22px}
#why .gl .front h3{margin-top:12px;font-size:clamp(17px,1.45vw,21px)}
#why .gl p{font-size:14px}

/* E · tactics board: the pitch line becomes a coach's board where noughts play a move against crosses (/assets/tactics.js) */
.tac{display:none}
body[data-dv="e"] :is(#why,#process,section.end){padding-top:clamp(170px,15vw,230px)}
body[data-dv="e"] .tac{display:block;position:absolute;left:0;right:0;top:clamp(16px,2vw,28px);height:clamp(130px,11vw,170px);pointer-events:none}
body[data-dv="e"] .tac canvas{display:block}

/* F · scroll match: the move is drawn on a fixed canvas behind everything; the page's content sits above it */
.pbg{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none}
body[data-dv="f"] .wrap,body[data-dv="f"] footer{position:relative;z-index:1}
@media (max-width:700px){.pbg{opacity:.6}}

/* G · scroll match on GSAP: one SVG as tall as the page, behind the content, scrolling with it */
.pgs{position:absolute;top:0;left:0;width:100%;z-index:0;pointer-events:none;overflow:visible}
body[data-dv="g"] .wrap,body[data-dv="g"] footer{position:relative;z-index:1}

/* C + D together (chosen 2026-10-09): each block sits on its own sheet, and the brand seam glows along the sheet's rounded top edge */
body[data-dv~="c"][data-dv~="d"] .seam{top:calc(-1 * clamp(56px,6vw,84px) / 2);z-index:1}

/* tighter rhythm on the sheets: the sheet's own edge and seam already mark the break, so the block needs far less empty space above its label
   (was ~250px of dark between one block's content and the next one's label) */
body[data-dv~="c"] :is(#why,#process,section.end,.sheet){margin-top:clamp(20px,2vw,32px);padding-top:clamp(44px,4.5vw,64px)}
body[data-dv~="c"] section.end{padding-bottom:clamp(64px,7vw,96px)}
body[data-dv~="c"] #why .gl{margin-top:clamp(22px,2.6vw,36px)}