/* Media pages (tools/v4_media.py): media.html, designer E's "Pull Back To The Coverage" built from
   docs/designers/media-build-spec.md, and the event pages (media-srs-piedrahita-2026.html).
   The site's look only: the dark ground, one orange, Poppins and DM Sans, the tokens of styles.css and v2.css.
   On media.html orange is a LIVE tally light: the primary action and the steady dot on what is on air. DM Mono only
   on the slate (Q2). html.e-move (set by v4-media.js, never under reduced motion) turns the opening and the four
   posters into one camera move; without it the page is the finished page: the opening, then the four. */

:root{--e-nav:93px;--e-navp:77px;--e-sp:calc(var(--e-navp) + 1rem);--e-r:4px;--e-gap:clamp(.75rem,1.5vw,1.3rem);--e-pp:clamp(.85rem,1.4vw,1.25rem)}

/* ================================================================ shared by the media pages ==== */

/* the event pages' opening, the site's kit-hero */
html body .kit-hero .kit-stats{gap:var(--sp-3) clamp(1.6rem,4vw,3.4rem)}
html body .kit-hero .kit-stat b{font-family:var(--font-display);font-weight:700;font-size:clamp(1.7rem,3.6vw,2.8rem);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
html body .kit-hero .kit-stat span{color:var(--gray-light);margin-top:.55rem}
.md-hero .kit-hero-media img{object-position:62% 40%}
.md-back{display:inline-block;margin-bottom:var(--sp-3);font-size:var(--fs-micro);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gray-light);text-decoration:none}
.md-back:hover{color:var(--white)}
.md-day+.md-day{border-top:1px solid var(--line)}
.md-day .md-frame{max-width:62rem;margin-top:var(--sp-4)}
.md-day .md-grid,.md-day .md-now{max-width:62rem}
.cta-buttons .btn-lines{align-self:center}

/* the showreel: one big frame, the others beside it, each plays in place (youtube-nocookie, only on a tap) */
.md-reel{display:grid;grid-template-columns:minmax(0,1.85fr) minmax(0,1fr);gap:clamp(1.25rem,3vw,2.5rem);align-items:stretch}
.md-frame{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--card);border-radius:3px;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.md-frame::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(246,244,244,.08)}
.md-frame>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-out),filter .45s var(--ease-out);filter:brightness(.84)}
.md-frame:hover>img{transform:scale(1.02);filter:none}
.md-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.md-frame.is-on>img,.md-frame.is-on .md-play{display:none}
.md-play{position:absolute;left:50%;top:50%;z-index:2;display:grid;place-items:center;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;
  background:color-mix(in srgb,var(--bg) 74%,transparent);color:var(--white);box-shadow:inset 0 0 0 1.5px rgba(246,244,244,.86),0 8px 30px rgba(0,0,0,.35);
  transition:color .3s var(--ease),transform .3s var(--ease),background .3s var(--ease)}
.md-play::before{content:"";position:absolute;inset:0}
.md-frame:hover .md-play,.md-play:focus-visible{color:var(--white);background:color-mix(in srgb,var(--orange) 80%,transparent)}
.md-play:active{transform:scale(.94)}
.md-play:focus-visible{outline:1px solid var(--orange);outline-offset:3px}
.md-play svg{position:relative;display:block;width:18px;height:18px;margin-left:3px;fill:currentColor}
.md-now{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.4rem 1.2rem;margin-top:var(--sp-2)}
.md-now h3{margin:0;font-family:var(--font-display);font-weight:600;font-size:var(--fs-h4);line-height:1.3;color:var(--white);text-wrap:balance}
/* the film, then its comp on a quieter line, as the list sets them (critic-1-6) */
.md-now h3 small{display:block;margin-top:.15rem;font-family:var(--font-body);font-weight:400;font-size:var(--fs-small);line-height:1.45;color:var(--gray)}
.md-meta a i{font-style:normal;color:var(--orange);margin-left:.15rem;display:inline-block;transition:transform .3s var(--ease-out)}
.md-meta a:hover i,.md-meta a:focus-visible i{transform:translateX(3px)}
/* the video's numbers: short pieces that wrap between them, never inside one (Q2) */
.md-meta{display:flex;flex-wrap:wrap;align-items:baseline;margin:0;font-size:var(--fs-small);line-height:1.6;color:var(--gray);font-variant-numeric:tabular-nums}
.md-meta>span{white-space:nowrap}
.md-meta>span[hidden]{display:none}
.md-meta>span+span::before{content:"\00b7";margin:0 .5rem;color:var(--edge-hi)}
.md-meta a{color:var(--gray-light);text-decoration:none;border-bottom:1px solid var(--line)}
.md-meta a:hover{color:var(--white);border-color:var(--orange)}
.md-side .v2-chips{margin:0 0 var(--sp-2)}
.md-list{list-style:none;margin:0;padding:0;max-height:min(30rem,62vh);overflow:auto;scrollbar-width:thin;scrollbar-color:var(--edge) transparent}
.md-list li[hidden]{display:none}
.md-list button{all:unset;box-sizing:border-box;display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:.9rem;align-items:center;width:100%;padding:.55rem .5rem;border-radius:3px;cursor:pointer;transition:background .2s var(--ease)}
.md-list button:hover,.md-list button:focus-visible{background:rgba(255,255,255,.05)}
.md-list button:focus-visible{outline:1px solid var(--orange)}
/* the film on air: a white title and the page's one tally dot, the row a shade lighter (critic-1-2) */
.md-list button[aria-current="true"]{background:rgba(246,244,244,.07)}
.md-tally{display:none}
.md-list button[aria-current="true"] .md-tally{display:inline-block;width:7px;height:7px;margin:0 .5rem .12em 0;border-radius:50%;vertical-align:middle;
  background:var(--orange);box-shadow:0 0 0 3px rgba(255,117,23,.16)}
.md-list img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;border-radius:2px}
.md-li{display:block;min-width:0}
.md-list b{display:block;font-family:var(--font-display);font-weight:600;font-size:.95rem;line-height:1.3;color:var(--white)}
.md-list small{display:block;margin-top:.25rem;font-size:var(--fs-small);line-height:1.45;color:var(--gray);font-variant-numeric:tabular-nums}
.md-list small span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.md-list button[aria-current="true"] b{color:var(--white)}
/* on this page orange is the tally light: a chosen filter is white, never a second orange block beside Check dates */
html body .e-proof .v2-chip[aria-pressed="true"]{background:rgba(246,244,244,.14);color:var(--white);box-shadow:inset 0 0 0 1px rgba(246,244,244,.62)}
html body .e-proof .v2-chip[aria-pressed="true"] i{color:var(--white);opacity:.72}
@media (min-width:901px){.md-side{position:relative}.md-side-in{position:absolute;inset:0;display:flex;flex-direction:column}.md-side .md-list{flex:1;min-height:0;max-height:none}}

/* the stills: every frame whole, in justified rows; each opens in the viewer */
.md-grid{display:flex;flex-wrap:wrap;gap:clamp(6px,.8vw,10px);margin-top:var(--sp-4);--rh:clamp(150px,19vw,270px)}
.md-grid::after{content:"";flex:999 1 0}
.md-grid.is-js::after{content:none}
.md-grid.is-js .md-ph{flex:none}
/* laid out by v4-media.js: each row one height, the photo covering its box (critic-3-2) */
.md-grid.is-js .md-ph a{height:100%}
.md-grid.is-js .md-ph img{height:100%;aspect-ratio:auto;object-fit:cover}
.md-ph{margin:0;flex:var(--r) 1 calc(var(--r) * var(--rh));position:relative;overflow:hidden;background:var(--card)}
.md-ph a{display:block;cursor:zoom-in}
.md-ph img{display:block;width:100%;height:auto;aspect-ratio:var(--r);transition:transform .8s var(--ease-out)}
.md-ph a:hover img,.md-ph a:focus-visible img{transform:scale(1.03)}
.md-ph a:focus-visible{outline:1px solid var(--orange);outline-offset:2px}
.md-ph figcaption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* the photo viewer, as on the India page (fly.js) */
.v4i-fl-lb{border:0;padding:0;margin:0;max-width:none;max-height:none;width:100vw;height:100vh;background:transparent;overflow:hidden;opacity:0;transition:opacity .22s var(--ease)}
.v4i-fl-lb.is-in{opacity:1}
.v4i-fl-lb::backdrop{background:rgba(20,21,25,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.v4i-fl-lbs{position:absolute;inset:0;display:grid;place-items:center;touch-action:none}
.v4i-fl-lb img{max-width:min(92vw,1800px);max-height:86vh;width:auto;height:auto;display:block;box-shadow:0 40px 120px rgba(0,0,0,.7);border-radius:3px;cursor:zoom-in;transform-origin:center center;transition:transform .18s var(--ease),opacity .22s var(--ease);user-select:none;-webkit-user-drag:none;transform:scale(.96)}
.v4i-fl-lb.is-in img{transform:none}
.v4i-fl-lb.is-zoomed img{cursor:grab}
.v4i-fl-lb.is-drag img{cursor:grabbing;transition:opacity .22s var(--ease)}
.v4i-fl-lbx{position:absolute;top:1rem;right:1rem;width:2.6rem;height:2.6rem;border-radius:50%;border:1px solid rgba(246,244,244,.3);background:rgba(20,21,25,.5);cursor:pointer;z-index:2;padding:0;transition:border-color .2s var(--ease),transform .2s var(--ease)}
.v4i-fl-lbx::before,.v4i-fl-lbx::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1px;margin:0 0 0 -7px;background:var(--white);transform:rotate(45deg)}
.v4i-fl-lbx::after{transform:rotate(-45deg)}
.v4i-fl-lbx:hover,.v4i-fl-lbx:focus-visible{border-color:var(--orange);outline:none;transform:rotate(90deg)}
.v4i-fl-lbc{position:absolute;left:1.25rem;bottom:1.1rem;max-width:50vw;display:flex;align-items:baseline;gap:.8rem;font-family:var(--font-display);font-weight:600;font-size:var(--fs-small);color:var(--white);pointer-events:none}
.v4i-fl-lbc .v4i-fl-lbi{font-family:var(--font-body);font-weight:400;font-size:var(--fs-micro);letter-spacing:.06em;color:var(--gray);font-variant-numeric:tabular-nums}
.v4i-fl-lbn{position:absolute;top:50%;transform:translateY(-50%);width:2.8rem;height:2.8rem;border-radius:50%;border:1px solid rgba(246,244,244,.3);background:rgba(20,21,25,.5);color:var(--white);cursor:pointer;z-index:2;display:grid;place-items:center;padding:0;transition:border-color .2s var(--ease),background .2s var(--ease)}
.v4i-fl-lbn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.v4i-fl-lbn:hover,.v4i-fl-lbn:focus-visible{border-color:var(--orange);background:rgba(255,117,23,.18);outline:none}
.v4i-fl-lbn[hidden]{display:none}
.v4i-fl-lbp{left:1rem}
.v4i-fl-lbnx{right:1rem}
.v4i-fl-lbh{position:absolute;right:1.25rem;bottom:1.2rem;font-size:var(--fs-micro);letter-spacing:.04em;color:var(--gray);white-space:nowrap;pointer-events:none}

/* a stop reached with the keyboard never lands under the nav (WCAG 2.4.11, qa-3-2): going back with Shift+Tab the
   browser shows each stop just at the top edge, and that scroll up brings the nav back over it. The page keeps the
   nav's height clear at its top for every scroll it makes (inside the reel's own list too); each part a link jumps to
   takes that room back in its own scroll-margin (calc(... - var(--e-sp))), so #dates, #pk-full, #watch and the
   form's fields land exactly where they did */
html{scroll-padding-top:var(--e-sp)}

/* the EXAMPLE mark: data the owner has not given yet, never to go live as it is */
.e-eg{display:inline-flex;align-items:center;padding:.18rem .45rem;border:1px dashed rgba(246,244,244,.42);border-radius:2px;
  font-size:.6875rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gray-light);line-height:1.2;white-space:nowrap}
.e-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ================================================================ media.html: the opening ==== */
.e-pull{position:relative}
.e-stage{position:relative}
/* the opening is one screen tall in both modes, its words kept clear of the nav above it, so the move never shifts it */
.e-hero{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:max(36rem,100vh);min-height:max(36rem,100svh);overflow:hidden;background:#0c1830}
.e-cam{position:absolute;inset:0;z-index:-2;overflow:hidden}
.e-cam-img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:60% 47%;
  transform-origin:0 0;max-width:none;user-select:none;-webkit-user-drag:none}
/* the scrim: dark where the words are (deck at least 4.5:1 over the white cloud, H2), the wing left clear */
.e-shade{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(48% 46% at 18% 74%,rgba(12,13,17,.5),rgba(12,13,17,0) 100%),
             linear-gradient(90deg,rgba(12,13,17,.88) 0%,rgba(12,13,17,.72) 30%,rgba(12,13,17,.3) 50%,rgba(12,13,17,0) 70%),
             linear-gradient(180deg,rgba(12,13,17,.5) 0%,rgba(12,13,17,0) 20%,rgba(12,13,17,.08) 52%,rgba(12,13,17,.66) 82%,rgba(20,21,25,.92) 100%)}
.e-cam-lab,.e-cam-foot,.e-cam-tally{display:none}
.e-hero-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:var(--sp-4) var(--sp-5);
  padding:clamp(4.5rem,11vh,7rem) var(--edge-x) calc(var(--e-nav) + clamp(1.4rem,4vh,2.6rem))}
.e-copy{max-width:41rem}

/* the slate: what is on next, with a tally light that is dim before, lit and steady on air, grey with nothing next (H3) */
.e-slate{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.3rem .62rem;margin:0 0 clamp(1rem,2.6vh,1.6rem);padding:.45rem .85rem .45rem .72rem;
  font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.08em;text-transform:uppercase;color:rgba(246,244,244,.92);
  background:rgba(12,13,17,.55);border:1px solid rgba(246,244,244,.14);border-radius:2px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.e-slate-k{color:var(--orange-lite);font-weight:500}
.e-slate-n{color:var(--gray-light)}
.e-slate-n::before{content:"\00b7";margin-right:.62rem}
.e-slate-n:empty{display:none}
.e-tally{display:inline-block;flex:none;width:7px;height:7px;border-radius:50%;background:rgba(255,117,23,.55);box-shadow:0 0 0 3px rgba(255,117,23,.12)}
[data-state="now"] .e-tally{background:var(--orange);box-shadow:0 0 0 3px rgba(255,117,23,.18),0 0 12px rgba(255,117,23,.8)}
[data-state="none"] .e-tally{background:var(--gray);box-shadow:none}
.e-slate[data-state="none"] .e-slate-k{color:var(--gray-light)}
.e-kick{display:block;margin:0 0 .85rem;font-size:var(--fs-micro);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(246,244,244,.9);
  text-shadow:0 1px 10px rgba(12,13,17,.6)}
.e-hero h1{margin:0;font-family:var(--font-display);font-weight:700;font-size:clamp(3.1rem,7.2vw,6.7rem);line-height:.96;letter-spacing:-.035em;
  color:var(--white);text-wrap:balance;text-shadow:0 2px 30px rgba(0,0,0,.28)}
.e-seen{display:block}
.e-deck{margin:clamp(1rem,2.4vh,1.4rem) 0 0;max-width:33rem;font-size:clamp(1.02rem,1.3vw,1.16rem);line-height:1.62;color:rgba(246,244,244,.92);text-wrap:pretty;
  text-shadow:0 1px 16px rgba(12,13,17,.5)}
.e-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.7rem;margin-top:clamp(1.3rem,3.2vh,2rem)}
.e-actions .btn-solid{margin:0;font-size:1rem;padding:1rem 2rem}

/* who hired him: two logo slots with the full names, marked as slots until the files arrive (H4) */
.e-for{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1rem;margin-top:clamp(1.3rem,3.2vh,2rem)}
.e-for-k{font-size:var(--fs-micro);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(246,244,244,.7)}
.e-logo{display:inline-flex;flex-direction:column;justify-content:center;align-self:stretch;min-width:6.4rem;padding:.5rem .8rem .45rem;
  border:1px dashed rgba(246,244,244,.36);border-radius:2px;background:rgba(12,13,17,.34)}
.e-logo b{font-family:var(--font-display);font-weight:800;font-size:1.08rem;letter-spacing:.08em;color:var(--white);line-height:1}
.e-logo small{margin-top:.3rem;font-size:.6875rem;line-height:1.25;color:rgba(246,244,244,.82)}
.e-logo em{margin-top:.2rem;font-style:normal;font-size:.6875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(246,244,244,.56)}

/* the three proof numbers, set like a broadcast score bug, each naming its source (H1) */
html body .e-bug{display:grid;grid-template-columns:repeat(3,auto);gap:0;margin:0;padding:0;border:0}
html body .e-bug .kit-stat{animation:none;padding:.95rem clamp(1rem,1.8vw,1.6rem) .1rem;border-left:1px solid rgba(246,244,244,.16);
  background:linear-gradient(180deg,rgba(12,13,17,.46),rgba(12,13,17,.2));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
html body .e-bug .kit-stat:first-child{border-left:0}
html body .e-bug .kit-stat::before{content:"";display:block;height:2px;margin:-.95rem calc(-1 * clamp(1rem,1.8vw,1.6rem)) .85rem;background:rgba(246,244,244,.22)}
html body .e-bug .kit-stat:first-child::before{background:linear-gradient(90deg,var(--orange) 0 2.4rem,rgba(246,244,244,.22) 2.4rem)}
html body .e-bug .kit-stat b{font-family:var(--font-display);font-weight:600;font-size:clamp(1.7rem,2.5vw,2.45rem);line-height:1;letter-spacing:-.02em;
  color:var(--white);-webkit-text-stroke:0;-webkit-text-fill-color:var(--white);white-space:nowrap;font-variant-numeric:tabular-nums}
html body .e-bug .kit-stat b small{font-size:.5em;font-weight:500;letter-spacing:0}
html body .e-bug .kit-stat span{margin-top:.55rem;color:rgba(246,244,244,.86);font-size:.72rem;letter-spacing:.12em}
/* the source is two pieces ("Views", "PWC Super Final"): one line here, two deliberate lines on a phone. The comma
   between them is real text, so a copy or a search snippet reads "views, PWC Super Final" (critic-2-5) */
html body .e-bug .e-cr span{display:inline;margin:0;font-size:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit}
html body .e-bug .kit-stat em{display:block;margin:.3rem 0 .85rem;font-style:normal;font-family:var(--font-body);font-size:.76rem;letter-spacing:0;text-transform:none;color:rgba(246,244,244,.76)}

/* ================================================================ the four ==== */
.e-four{position:relative;padding:var(--sp-section) var(--edge-x)}
.e-four-in{max-width:var(--measure);margin:0 auto}
.e-four-head{margin-bottom:clamp(1.2rem,3vh,2rem)}
.e-posters{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.4rem var(--e-gap)}
.e-pl{position:relative;min-width:0;display:flex;flex-direction:column}
/* the event as one numbered line through the four: 01 before the race to 04 mid-season, the one on air lit */
.e-when{display:flex;align-items:center;gap:.55rem;margin:0 0 .75rem;font-size:var(--fs-micro);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gray-light);white-space:nowrap}
.e-when b{font-weight:600;color:var(--white);letter-spacing:.08em}
.e-when::after{content:"";flex:1 1 auto;min-width:1rem;height:1px;margin-right:calc(-1 * var(--e-gap));background:var(--edge)}
.e-pl:last-child .e-when::after{margin-right:0;background:linear-gradient(90deg,var(--edge),transparent)}
.e-dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 1px var(--edge-hi)}
.e-pl.is-cam .e-dot{box-shadow:inset 0 0 0 1px var(--orange);background:radial-gradient(circle,var(--orange) 0 2px,var(--bg) 2.5px)}
.e-poster{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;aspect-ratio:3/4;overflow:hidden;
  border-radius:var(--e-r);background:var(--card);color:var(--white);text-decoration:none;padding:var(--e-pp);
  box-shadow:0 24px 60px rgba(0,0,0,.42);transition:translate .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.e-poster::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(246,244,244,.09);
  transition:box-shadow .35s var(--ease-out)}
.e-poster img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-out)}
.e-poster .e-p2-img{object-position:50% 30%}
.e-poster::before,.e-cam-foot{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(20,21,25,0) 30%,rgba(20,21,25,.74) 60%,rgba(20,21,25,.96) 100%)}
.e-poster>span,.e-cam-lab>span{text-shadow:0 1px 12px rgba(12,13,17,.55)}
.e-p-t{font-family:var(--font-display);font-weight:700;font-size:clamp(1.12rem,1.65vw,1.55rem);line-height:1.08;letter-spacing:-.01em;text-wrap:balance}
.e-p-tags{margin-top:.45rem;font-size:.8rem;line-height:1.45;color:var(--gray-light);text-wrap:pretty}
.e-p-go{margin-top:.75rem;padding-top:.65rem;border-top:1px solid rgba(246,244,244,.16);font-family:var(--font-display);font-weight:600;font-size:.8rem;color:var(--white)}
/* side by side, every description holds two lines, so the four titles share a line even without JavaScript;
   v4-media.js evens out a longer one (critic-3-3) */
@media (min-width:701px){.e-p-tags{min-height:2.9em}}
/* the link arrows are the link's own colour: on this page orange is the tally light, the next comp and the one Check
   dates, not a decoration on every link (critic-2-7) */
.e-p-go i{font-style:normal;color:currentColor;margin-left:.15rem;display:inline-block;transition:transform .3s var(--ease-out)}
/* the tally lamp on each poster: lit on the one on air (the shot the page opened on), and on the one you point at */
.e-p-tally,.e-cam-tally{position:absolute;top:.8rem;right:.8rem;z-index:3;width:7px;height:7px;border-radius:50%;background:rgba(246,244,244,.32);
  box-shadow:0 0 0 3px rgba(12,13,17,.35);transition:background .25s var(--ease-out),box-shadow .25s var(--ease-out)}
.e-pl.is-cam .e-p-tally,.e-cam-tally,.e-pl:is(:hover,:focus-within) .e-p-tally{background:var(--orange);box-shadow:0 0 0 3px rgba(255,117,23,.16),0 0 12px rgba(255,117,23,.75)}
.e-posters:has(.e-pl:not(.is-cam):is(:hover,:focus-within)) .e-pl.is-cam:not(:hover):not(:focus-within) .e-p-tally{background:rgba(246,244,244,.32);box-shadow:0 0 0 3px rgba(12,13,17,.35)}
.e-pl.is-cam .e-poster::after,.e-pl:is(:hover,:focus-within) .e-poster::after{box-shadow:inset 0 0 0 1px rgba(255,117,23,.55)}
.e-posters:has(.e-pl:not(.is-cam):is(:hover,:focus-within)) .e-pl.is-cam:not(:hover):not(:focus-within) .e-poster::after{box-shadow:inset 0 0 0 1px rgba(246,244,244,.09)}
@media (hover:hover){.e-poster:hover{translate:0 -6px;box-shadow:0 34px 80px rgba(0,0,0,.58)}.e-poster:hover img{transform:scale(1.045)}.e-poster:hover .e-p-go i{transform:translateX(4px)}}
.e-poster:focus-visible{outline:1px solid var(--orange);outline-offset:3px}
/* on the phone's rail a poster only partly in view keeps its picture and its number; its words wait until it is in,
   so no word is ever cut by the screen's edge (critic-1-7; v4-media.js sets .is-off) */
.e-pl :is(.e-poster>span,.e-in){transition:opacity .25s var(--ease)}
.e-pl.is-off :is(.e-poster>span,.e-in){opacity:0}
/* ...but a poster that holds the keyboard's focus shows its words at once, as the rail brings it to the middle (qa-2-1) */
.e-pl.is-off:focus-within :is(.e-poster>span,.e-in){opacity:1}
/* the package each piece is in (P5) */
.e-in{margin:.7rem 0 0;font-size:var(--fs-small);line-height:1.5;color:var(--gray)}
.e-in a{color:var(--gray-light);text-decoration:none;border-bottom:1px solid var(--edge);transition:color .2s var(--ease),border-color .2s var(--ease)}
.e-in a:hover,.e-in a:focus-visible{color:var(--white);border-color:var(--orange)}
.e-four-note{margin:clamp(.9rem,2.2vh,1.4rem) 0 0;font-size:var(--fs-small);color:var(--gray)}

/* ================================================================ the move (html.e-move only) ==== */
/* the stage is pinned for --e-travel of scrolling; the poster board lies under the shot (opaque, P2), the shot is the
   camera in front of it, the opening's words in front of both; the board's words show only once the shot has cleared them */
html.e-move .e-pull{height:calc(100vh + var(--e-travel,80vh));height:calc(100svh + var(--e-travel,80svh))}
html.e-move .e-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--bg)}
html.e-move .e-hero{position:absolute;inset:0;min-height:0;isolation:auto;background:none}
html.e-move .e-cam{z-index:2;will-change:clip-path}
html.e-move .e-stage.is-pull .e-cam{cursor:pointer}
html.e-move .e-cam-img{width:var(--e-bw,100%);height:var(--e-bh,100%);object-fit:fill;will-change:transform}
html.e-move .e-cam-lab{position:absolute;left:0;top:0;z-index:1;display:flex;flex-direction:column;justify-content:flex-end;width:300px;height:400px;
  padding:var(--e-pp);color:var(--white);opacity:0;pointer-events:none;will-change:transform,opacity}
/* the poster's foot runs the whole width of the shot (clipped to it), so the words never sit on a box edge */
html.e-move .e-cam-foot{display:block;inset:0 auto auto 0;z-index:0;width:100%;height:400px;opacity:0;pointer-events:none;will-change:transform,opacity}
html.e-move .e-cam-tally{display:block;top:0;right:auto;left:0;opacity:0;will-change:transform,opacity}
html.e-move .e-hero-in{z-index:3}
/* once the pull-back starts a tap between the words reaches the shot (the Daily Highlights link); the two buttons keep
   working while they can still be seen (P1, qa-1-1) */
html.e-move .e-stage.is-pull .e-hero-in,html.e-move .e-stage.is-gone .e-hero-in{pointer-events:none}
html.e-move .e-stage.is-pull:not(.is-gone) .e-hero-in :is(a,button){pointer-events:auto}
/* the frame is opaque: on a phone the shot opens lifted, its foot feathered into the ground */
html.e-move .e-cam{background:var(--bg)}
/* the other three come in as pictures; their words wait until the shot has cleared them (critic-1-1) */
html.e-move .e-pl:not(.is-cam) :is(.e-when,.e-in,.e-poster>span,.e-p-tally){opacity:var(--e-co,1)}
html.e-move .e-pl.is-off:not(.is-cam) :is(.e-in,.e-poster>span){opacity:0}
html.e-move .e-pl.is-off:not(.is-cam):focus-within :is(.e-in,.e-poster>span){opacity:var(--e-co,1)}
html.e-move .e-four{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--e-navp) + .75rem) var(--edge-x) clamp(.75rem,2.5vh,1.5rem)}
html.e-move .e-four-in{width:100%}
html.e-move .e-stage .kit-head{animation:none}
html.e-move .e-posters,html.e-move .e-four-head,html.e-move .e-four-note{max-width:calc(4 * var(--e-pw,300px) + 3 * var(--e-gap));margin-left:auto;margin-right:auto}
html.e-move .e-stage:not(.is-done) .e-pl.is-cam .e-poster>*,html.e-move .e-stage:not(.is-done) .e-pl.is-cam .e-poster::before,
html.e-move .e-stage:not(.is-done) .e-pl.is-cam .e-poster::after{visibility:hidden}
html.e-move .e-stage.is-done .e-cam{visibility:hidden}

/* ================================================================ packages ==== */
.e-pk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2vw,1.6rem);align-items:stretch}
.e-pk-card{position:relative;display:flex;flex-direction:column;padding:clamp(1.4rem,2.4vw,2rem);border-radius:var(--e-r);scroll-margin-top:calc(var(--e-navp) + 1.5rem - var(--e-sp));
  background:linear-gradient(180deg,rgba(246,244,244,.045),rgba(246,244,244,.015) 60%,rgba(246,244,244,.01));box-shadow:inset 0 0 0 1px var(--line);
  transition:box-shadow .4s var(--ease-out)}
.e-pk-card.is-pick{background:linear-gradient(180deg,rgba(255,117,23,.07),rgba(246,244,244,.015) 55%,rgba(246,244,244,.01));box-shadow:inset 0 0 0 1px rgba(255,117,23,.42)}
.e-pk-card.is-lit{box-shadow:inset 0 0 0 1px var(--orange),0 0 0 6px rgba(255,117,23,.08)}
.e-pk-top{position:relative}
.e-pk-n{display:block;font-size:var(--fs-micro);font-weight:600;letter-spacing:.12em;color:var(--gray);font-variant-numeric:tabular-nums}
.e-pk-card h3{margin:.4rem 0 0;font-family:var(--font-display);font-weight:700;font-size:clamp(1.6rem,2.6vw,2.2rem);line-height:1.05;letter-spacing:-.02em;color:var(--white)}
.e-pk-top p{margin:.45rem 0 0;color:var(--gray-light);font-size:var(--fs-body-s)}
.e-pick{position:absolute;top:0;right:0;display:inline-flex;align-items:center;gap:.5rem;font-size:var(--fs-micro);font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--white)}
/* what a package covers, as a bar (K1) */
.e-cov{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin:clamp(1.1rem,2.2vw,1.5rem) 0 0}
.e-cov span{padding-top:.55rem;border-top:3px solid var(--line);font-size:.6875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gray);white-space:nowrap}
.e-cov .is-on{border-top-color:var(--white);color:var(--white)}
/* Season: one bar that runs on past the card's edge, a tick at each stop, no count (the facts give none) */
.e-cov.is-season{grid-template-columns:minmax(0,1fr)}
.e-cov.is-season span{position:relative;padding-top:.9rem;border-top:0}
.e-cov.is-season span::before{content:"";position:absolute;left:0;right:0;top:0;height:9px;pointer-events:none;
  background:linear-gradient(90deg,var(--white) 62%,transparent) top/100% 3px no-repeat,
             repeating-linear-gradient(90deg,var(--white) 0 1px,transparent 1px 2.6rem) 0 3px/100% 6px no-repeat;
  -webkit-mask-image:linear-gradient(90deg,#000 55%,transparent);mask-image:linear-gradient(90deg,#000 55%,transparent)}
.e-run{list-style:none;margin:clamp(1rem,2vw,1.4rem) 0 0;padding:0;flex:1}
.e-run li{display:grid;grid-template-columns:5.6rem minmax(0,1fr);column-gap:1rem;padding:.8rem 0;border-top:1px solid var(--line)}
.e-run li:last-child{border-bottom:1px solid var(--line)}
.e-run span{grid-row:span 2;padding-top:.2rem;font-size:.6875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gray)}
.e-run b{font-family:var(--font-display);font-weight:600;font-size:1rem;color:var(--white);line-height:1.3}
.e-run em{font-style:normal;font-size:var(--fs-small);line-height:1.5;color:var(--gray-light);margin-top:.15rem}
.e-pk-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:clamp(1.2rem,2.4vw,1.6rem)}
.e-pk-foot .btn-solid{margin:0}
.e-pk-price{font-size:var(--fs-micro);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gray-light)}
.e-addons{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1.6rem;margin:clamp(1.4rem,3vw,2rem) 0 0;font-size:var(--fs-body-s);color:var(--gray-light)}
.e-addons b{font-size:var(--fs-micro);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--white)}
.e-addons span{position:relative;padding-left:1rem}
.e-addons span::before{content:"+";position:absolute;left:0;color:var(--gray)}
/* the sponsor's first question (K4): only the joint posts are a fact so far */
.e-spons{display:grid;grid-template-columns:minmax(0,14rem) minmax(0,1fr);gap:1rem clamp(1.5rem,3vw,2.5rem);align-items:start;
  margin-top:clamp(2rem,4vw,3rem);padding-top:var(--sp-3);border-top:1px solid var(--line)}
.e-spons h3{margin:0;font-family:var(--font-display);font-weight:600;font-size:var(--fs-h4);line-height:1.3;color:var(--white)}
.e-spons ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem clamp(1rem,2vw,1.6rem)}
.e-spons li{display:flex;flex-direction:column;gap:.25rem;padding-top:.7rem;border-top:2px solid var(--edge)}
.e-spons li:first-child{border-top-color:var(--white)}
.e-spons b{font-family:var(--font-display);font-weight:600;font-size:.96rem;line-height:1.3;color:var(--white)}
.e-spons span{font-size:var(--fs-small);line-height:1.5;color:var(--gray-light)}

/* ================================================================ reach ==== */
/* the 2026 total over the gaggle (F's band), then one post with two audiences, then the season on its own dates */
.e-reach{position:relative}
.e-reach-band{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:flex-end;min-height:clamp(520px,80vh,780px);padding:var(--sp-section) var(--edge-x)}
.e-reach-band>img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:50% 40%;filter:saturate(.9) brightness(.82)}
.e-reach-band::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  linear-gradient(180deg,var(--bg) 0%,rgba(20,21,25,.22) 14%,rgba(20,21,25,.12) 46%,rgba(20,21,25,.82) 84%,var(--bg) 100%),
  linear-gradient(90deg,rgba(20,21,25,.74) 0%,rgba(20,21,25,.22) 55%,rgba(20,21,25,0) 80%)}
.e-reach-in{width:100%;max-width:var(--measure);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-5);align-items:end}
.e-reach-in .kit-head{margin:0}
.e-total{text-align:right}
.e-total-n{margin:0}
.e-total-n b{display:block;font-family:var(--font-display);font-weight:700;font-size:clamp(4rem,12.5vw,11.5rem);line-height:.82;letter-spacing:-.05em;color:var(--white);font-variant-numeric:tabular-nums}
.e-total-n span{display:block;margin-top:1.1rem;font-size:var(--fs-micro);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--white);text-wrap:balance}
.e-total-n small{display:block;margin-top:.35rem;font-size:var(--fs-small);color:var(--gray-light)}
.e-most{margin:1rem 0 0 auto;max-width:27rem;font-size:var(--fs-body-s);line-height:1.55;color:var(--gray-light);text-wrap:balance}
.e-most b{margin-right:.35rem;font-size:var(--fs-micro);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--white)}
.e-reach-b{padding-top:clamp(2rem,4vw,3rem)}
/* one joint post, two audiences, said plainly (R3), and the audience it joins (R4) */
.e-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:1.2rem clamp(2rem,5vw,5rem);align-items:end;
  padding-bottom:clamp(2rem,4vw,3rem);border-bottom:1px solid var(--line)}
.e-two-h{margin:0;font-family:var(--font-display);font-weight:700;font-size:clamp(1.8rem,3.6vw,2.8rem);line-height:1.08;letter-spacing:-.02em;color:var(--white);text-wrap:balance}
.e-two-h span{color:var(--gray-light)}
.e-two-l{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:start;gap:1rem 1.4rem}
.e-aud{min-width:0;padding-top:.9rem;border-top:2px solid var(--white)}
.e-aud b{display:block;font-family:var(--font-display);font-weight:600;font-size:clamp(1.15rem,1.8vw,1.45rem);line-height:1.2;color:var(--white)}
.e-aud>span{display:block;margin-top:.4rem;font-size:var(--fs-small);color:var(--gray-light)}
.e-plus{align-self:center;padding-top:.9rem;font-family:var(--font-display);font-weight:300;font-size:2rem;line-height:1;color:var(--gray)}
.e-base{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;margin:.55rem 0 0}
.e-base div{display:flex;flex-direction:column}
.e-base dt{font-size:var(--fs-micro);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gray)}
.e-base dd{margin:.2rem 0 0;font-size:var(--fs-body-s)}
.e-pod{grid-column:1 / -1;margin:0;font-size:var(--fs-small);color:var(--gray);text-wrap:pretty}
/* the 2026 season on its real dates, Today marked, the next comp lit, the views per event with a Watch on each (R1, D's rows) */
.e-season{margin:clamp(2rem,4vw,3rem) 0 0;padding:0}
.e-season-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.4rem 1rem;margin:0 0 1.1rem}
.e-season-h b{font-family:var(--font-display);font-weight:600;font-size:var(--fs-h4);color:var(--white)}
.e-season-h span,.e-season-f{font-size:var(--fs-small);color:var(--gray)}
.e-tl{position:relative;height:3.3rem;margin:0 0 .4rem}
.e-tl::before{content:"";position:absolute;left:0;right:0;top:1.25rem;height:1px;background:var(--edge)}
.e-tl-m{position:absolute;left:calc(var(--x) * 100%);top:1.25rem;height:1.1rem;padding:.7rem 0 0 .45rem;border-left:1px solid var(--edge);box-sizing:content-box;
  font-size:.6875rem;font-weight:600;line-height:1;letter-spacing:.12em;text-transform:uppercase;color:var(--gray)}
/* each event a pill on its dates; a ring in the ground colour keeps two close events apart (May: PWC, then Bassano) */
.e-tl-k{position:absolute;top:calc(1.25rem - 4px);left:calc(var(--x) * 100% - 4.5px);width:calc(var(--w,0) * 100% + 9px);height:9px;border-radius:5px;
  background:var(--white);box-shadow:0 0 0 2px var(--bg);transition:box-shadow .25s var(--ease)}
.e-tl-k.is-next{background:rgba(255,117,23,.6)}
.e-season[data-state="now"] .e-tl-k.is-next{background:var(--orange);box-shadow:0 0 0 2px var(--bg),0 0 0 5px rgba(255,117,23,.16),0 0 14px rgba(255,117,23,.7)}
/* once it is over it is one of the season's past events: orange is only for next and on air (qa-2-5) */
.e-season[data-state="none"] .e-tl-k.is-next{background:var(--white)}
.e-tl-today{position:absolute;top:0;left:calc(var(--x) * 100%);height:1.25rem;border-left:1px dashed var(--gray-light)}
.e-tl-today i{position:absolute;right:.4rem;top:-.05rem;font-style:normal;font-size:.6875rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gray-light);white-space:nowrap}
.e-season:has(.e-row[data-i="1"]:is(:hover,:focus-within)) .e-tl-k[data-i="1"],.e-season:has(.e-row[data-i="2"]:is(:hover,:focus-within)) .e-tl-k[data-i="2"],
.e-season:has(.e-row[data-i="3"]:is(:hover,:focus-within)) .e-tl-k[data-i="3"],.e-season:has(.e-row[data-i="4"]:is(:hover,:focus-within)) .e-tl-k[data-i="4"]{box-shadow:0 0 0 2px var(--bg),0 0 0 5px rgba(246,244,244,.22)}
.e-rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--edge)}
.e-row{display:grid;grid-template-columns:8.6rem minmax(0,1.25fr) minmax(0,1fr) minmax(5rem,10rem) 7.2rem 5.2rem;grid-template-areas:"d n m bar v w";
  column-gap:clamp(.9rem,1.6vw,1.5rem);align-items:center;padding:1rem 0;border-bottom:1px solid var(--line);transition:background .2s var(--ease)}
.e-row:hover{background:rgba(246,244,244,.02)}
.e-row-d{grid-area:d;display:flex;align-items:center;gap:.45rem;font-size:var(--fs-small);font-weight:600;color:var(--gray-light);white-space:nowrap}
.e-row-n{grid-area:n;min-width:0}
.e-row-n b{display:block;font-family:var(--font-display);font-weight:600;font-size:1rem;line-height:1.3;color:var(--white)}
.e-row-n small{display:block;margin-top:.15rem;font-size:var(--fs-small);line-height:1.4;color:var(--gray)}
/* the middot between the edition and the place is real text, for the same reason (critic-2-5) */
.e-row-sep{margin:0 .2rem}
.e-row-m{grid-area:m;font-size:var(--fs-small);line-height:1.45;color:var(--gray-light)}
.e-row-bar{grid-area:bar;position:relative;height:8px}
.e-row-bar i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--v) * 100%);min-width:6px;background:rgba(246,244,244,.78);border-radius:0 4px 4px 0;
  transform-origin:0 50%;transition:transform 1.2s var(--ease-out)}
.e-row-v{grid-area:v;justify-self:end;font-family:var(--font-display);font-weight:600;font-size:1.1rem;color:var(--white);font-variant-numeric:tabular-nums;white-space:nowrap}
.e-row-v small{font-family:var(--font-body);font-weight:400;font-size:var(--fs-small);color:var(--gray)}
.e-watch{grid-area:w;justify-self:end;padding:.55rem 0;font-family:var(--font-display);font-weight:600;font-size:.86rem;color:var(--white);text-decoration:none;white-space:nowrap}
.e-watch i{display:inline-block;margin-left:.15rem;font-style:normal;color:currentColor;transition:transform .3s var(--ease-out)}
.e-watch:hover i,.e-watch:focus-visible i{transform:translateX(4px)}
.e-proof .md-meta a i{color:currentColor}
.e-row.is-next{grid-template-areas:"d n m w w w"}
.e-row.is-next .e-row-bar,.e-row.is-next .e-row-v{display:none}
.e-row.is-next .e-row-d b{color:var(--white);font-weight:600}
.e-season-f{display:flex;justify-content:space-between;gap:1rem;margin:.9rem 0 0}
html.md-js .e-season:not(.is-in) .e-row-bar i{transform:scaleX(0)}

/* ================================================================ proof ==== */
/* the quote over the race: about half a screen, the gaggle bright enough to read as a sky full of wings (critic-1-16) */
.e-qband{position:relative;isolation:isolate;display:grid;place-items:center;min-height:clamp(22rem,58vh,34rem);padding:clamp(3.5rem,9vh,6rem) var(--edge-x);overflow:hidden}
.e-qband-media{position:absolute;inset:0;z-index:-2}
.e-qband-media img{width:100%;height:100%;object-fit:cover;object-position:50% 55%;filter:saturate(1.05) brightness(1.08)}
.e-qband::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--bg) 0%,rgba(20,21,25,0) 22%,rgba(20,21,25,0) 78%,var(--bg) 100%),radial-gradient(60% 62% at 50% 50%,rgba(16,17,21,.62),rgba(18,19,23,.34) 100%)}
.e-quote{position:relative;margin:0 auto;max-width:58rem;text-align:center}
.e-quote .e-eg{margin-bottom:1.3rem;background:rgba(12,13,17,.55);color:var(--white)}
.e-quote blockquote{margin:0}
.e-quote p{margin:0;font-family:var(--font-display);font-weight:600;font-size:clamp(1.5rem,3.2vw,2.6rem);line-height:1.24;letter-spacing:-.015em;color:var(--white);text-wrap:balance;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.e-quote figcaption{margin-top:var(--sp-3);display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:.6rem;font-size:var(--fs-micro);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(246,244,244,.74)}
/* the organiser still to come: the site's to-supply mark (italic, lower case), as bright as the line beside it over the
   photo (critic-2-4) */
.e-quote figcaption .v2-tbd{font-size:var(--fs-small);letter-spacing:0;text-transform:none;color:inherit}
/* the Watch intro: no ragged break inside a figure or a name (critic-2-3) */
.e-watch-head .kit-intro{text-wrap:pretty}
.e-watch-head{scroll-margin-top:calc(var(--e-navp) + 1.5rem - var(--e-sp))}
.e-stills-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.4rem 2rem;margin:clamp(3rem,6vw,4.5rem) 0 0;padding-top:var(--sp-3);border-top:1px solid var(--line)}
.e-stills-head h3{margin:0;font-family:var(--font-display);font-weight:600;font-size:var(--fs-h3);color:var(--white)}
.e-stills-head p{margin:0;font-size:var(--fs-small);color:var(--gray)}
.e-more{margin-top:var(--sp-4)}

/* ================================================================ delivery ==== */
.e-del-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.e-del-grid h3{margin:0 0 var(--sp-3);font-family:var(--font-display);font-weight:600;font-size:var(--fs-h4);color:var(--white)}
.e-frames{list-style:none;margin:0;padding:0;display:flex;align-items:flex-start;gap:clamp(.8rem,2vw,1.6rem)}
.e-fr{display:flex;flex-direction:column;min-width:0}
.e-fr.is-169{flex:1.7778 1 0}.e-fr.is-916{flex:.5625 1 0}.e-fr.is-still{flex:1.5 1 0}
.e-fr-t{display:flex;flex-direction:column}
.e-fr-box{position:relative;display:block;overflow:hidden;border-radius:3px;background:var(--card);box-shadow:0 18px 50px rgba(0,0,0,.4)}
.e-fr.is-169 .e-fr-box{aspect-ratio:16/9}.e-fr.is-916 .e-fr-box{aspect-ratio:9/16}.e-fr.is-still .e-fr-box{aspect-ratio:3/2}
.e-fr-box img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* safe-area corners, as on a monitor */
.e-fr-box::after{content:"";position:absolute;inset:8px;pointer-events:none;
  background:linear-gradient(rgba(246,244,244,.7),rgba(246,244,244,.7)) top left/10px 1px,linear-gradient(rgba(246,244,244,.7),rgba(246,244,244,.7)) top left/1px 10px,
  linear-gradient(rgba(246,244,244,.7),rgba(246,244,244,.7)) top right/10px 1px,linear-gradient(rgba(246,244,244,.7),rgba(246,244,244,.7)) top right/1px 10px,
  linear-gradient(rgba(246,244,244,.7),rgba(246,244,244,.7)) bottom left/10px 1px,linear-gradient(rgba(246,244,244,.7),rgba(246,244,244,.7)) bottom left/1px 10px,
  linear-gradient(rgba(246,244,244,.7),rgba(246,244,244,.7)) bottom right/10px 1px,linear-gradient(rgba(246,244,244,.7),rgba(246,244,244,.7)) bottom right/1px 10px;background-repeat:no-repeat}
.e-fr b{margin-top:.8rem;font-family:var(--font-display);font-weight:600;font-size:1.05rem;color:var(--white);white-space:nowrap}
.e-fr small{margin-top:.1rem;font-size:var(--fs-small);color:var(--gray-light);white-space:nowrap}
/* what I need, numbered like a production rider (D1) */
.e-needs{list-style:none;margin:0;padding:0;counter-reset:need;border-bottom:1px solid var(--line)}
.e-needs li{counter-increment:need;display:grid;grid-template-columns:2.6rem minmax(0,1fr);column-gap:.4rem;align-items:baseline;padding:1rem 0;border-top:1px solid var(--line)}
.e-needs li::before{content:counter(need,decimal-leading-zero);grid-row:span 2;font-size:var(--fs-micro);font-weight:600;letter-spacing:.1em;color:var(--gray);font-variant-numeric:tabular-nums}
.e-needs b{font-family:var(--font-display);font-weight:600;font-size:1rem;color:var(--white)}
.e-needs span{grid-column:2;margin-top:.2rem;font-size:var(--fs-small);color:var(--gray)}
.e-rider{display:grid;grid-template-columns:minmax(0,9rem) minmax(0,1fr);gap:.4rem 1.6rem;align-items:baseline;margin:clamp(2rem,4vw,3rem) 0 0;padding:1.05rem 0;
  border-top:1px solid var(--edge);border-bottom:1px solid var(--edge)}
.e-rider b{font-size:var(--fs-micro);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--white)}
.e-rider span{max-width:62ch;font-size:var(--fs-body-s);line-height:1.6;color:var(--gray-light);text-wrap:pretty}

/* ================================================================ questions ==== */
.e-faq-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.e-faq-in .kit-head{margin-bottom:0}
.e-faq-more{margin:var(--sp-3) 0 0;font-size:var(--fs-body-s);color:var(--gray-light)}
.e-faq-more a{color:var(--white);text-decoration:none;border-bottom:1px solid var(--orange)}
.e-faq-more a:hover{color:var(--orange-lite)}
.e-qs details{border-top:1px solid var(--line)}
.e-qs details:last-child{border-bottom:1px solid var(--line)}
.e-qs summary{position:relative;display:block;padding:1.1rem 2.5rem 1.1rem 0;cursor:pointer;list-style:none;font-family:var(--font-display);font-weight:600;font-size:1.05rem;color:var(--white);
  transition:color .2s var(--ease)}
.e-qs summary::-webkit-details-marker{display:none}
.e-qs summary::after{content:"";position:absolute;right:.4rem;top:50%;width:.5rem;height:.5rem;margin-top:-.35rem;border-right:1.5px solid var(--gray-light);border-bottom:1.5px solid var(--gray-light);transform:rotate(45deg);transition:transform .25s var(--ease)}
.e-qs details[open] summary::after{transform:rotate(-135deg);margin-top:-.1rem;border-color:var(--orange)}
.e-qs summary:hover{color:var(--orange-lite)}
.e-qs summary:focus-visible{outline:1px solid var(--orange);outline-offset:4px}
.e-qs details p{margin:0;padding:0 2.5rem 1.2rem 0;max-width:42rem;font-size:var(--fs-body-s);line-height:1.7;color:var(--gray-light)}

/* ================================================================ dates ==== */
/* the site's call band (.cta-band, .cta-card): the page's one lit panel, holding the one action */
/* wide: the heading, the season and the talk-first line on the left, the form on the right; narrow: the heading, the
   form at once, talk first, then the season (the markup's order, buyer-1-4) */
html body .cta-band .cta-card.e-dates-card{max-width:var(--measure);margin:0 auto;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  grid-template-areas:"head form" "cal form" "or form";grid-template-rows:auto auto 1fr;
  column-gap:clamp(2rem,5vw,4.5rem);row-gap:0;align-items:start;padding:clamp(1.6rem,4vw,3.4rem)}
html body .cta-band .e-dates-card .kit-head{margin-bottom:var(--sp-4)}
html body .cta-band .e-dates-card h2{margin:0;font-size:var(--fs-h2)}
.e-dates-card>.e-dates-head{grid-area:head}
.e-dates-card>.e-form{grid-area:form}
.e-dates-card>.e-cal{grid-area:cal}
.e-dates-card>.e-or{grid-area:or}
.e-dates{scroll-margin-top:calc(0px - var(--e-sp))}
/* the 2027 season, EXAMPLE: open months fill the dates, held ones are dashed, booked ones struck through (S1) */
.e-cal-h{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:0 0 .8rem}
.e-cal-h b{font-family:var(--font-display);font-weight:600;font-size:var(--fs-h4);color:var(--white)}
.e-months{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
.e-months li{display:flex;min-width:0}
.e-months button,.e-mo{all:unset;box-sizing:border-box;display:flex;flex-direction:column;gap:.3rem;width:100%;padding:.7rem .6rem .65rem;border-top:2px solid var(--line);background:rgba(246,244,244,.03)}
.e-months b{font-family:var(--font-display);font-weight:600;font-size:.98rem;line-height:1;color:var(--white)}
.e-months :is(button,.e-mo)>span{font-size:.6875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gray)}
.e-months .is-open button{cursor:pointer;border-top-color:var(--white);transition:background .2s var(--ease),border-color .2s var(--ease)}
.e-months .is-open button>span{color:var(--gray-light)}
.e-months .is-open button:hover,.e-months .is-open.is-picked button{border-top-color:var(--orange);background:var(--wash)}
.e-months .is-open button:focus-visible{outline:1px solid var(--orange);outline-offset:2px}
.e-months .is-held .e-mo{border-top-style:dashed;border-top-color:var(--edge-hi)}
.e-months .is-booked .e-mo{background:transparent}
.e-months .is-booked b{color:var(--gray);text-decoration:line-through;text-decoration-color:var(--gray)}
.e-cal-note{margin:.85rem 0 0;font-size:var(--fs-small);line-height:1.5;color:var(--gray)}
.e-or{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.6rem;margin-top:var(--sp-4);padding-top:var(--sp-3);border-top:1px solid var(--line)}
.e-or>span{font-size:var(--fs-small);color:var(--gray)}
.e-form{position:relative;padding-top:clamp(.4rem,2vw,2.6rem)}
.e-f-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1.1rem}
.e-field{margin:0 0 1.1rem;min-width:0}
.e-field label{display:block;margin:0 0 .4rem;color:var(--gray-light);font-size:.88rem}
.e-opt{color:var(--gray)}
/* a field the browser points at never lands under the fixed nav (S2) */
.e-field input,.e-field select{width:100%;min-height:48px;background:var(--card);color:var(--white);border:1px solid var(--rule);border-radius:0;
  font-family:var(--font-body);font-size:16px;padding:.7rem .8rem;scroll-margin-top:calc(var(--e-nav) + 3rem - var(--e-sp));color-scheme:dark}
.e-field input::placeholder{color:#6b6b70}
.e-field input:focus,.e-field select:focus{outline:none;border-color:var(--orange)}
/* a month picked in the season lands here: the field shows it for a moment (critic-1-11) */
.e-field input{transition:border-color .3s var(--ease),background-color .6s var(--ease)}
.e-field input.is-flash{border-color:var(--orange);background-color:color-mix(in srgb,var(--orange) 10%,var(--card))}
.e-sel{position:relative}
.e-sel select{appearance:none;-webkit-appearance:none;padding-right:2.6rem;cursor:pointer}
.e-sel::after{content:"";position:absolute;right:1.1rem;bottom:1.25rem;width:.42rem;height:.42rem;pointer-events:none;border-right:1.5px solid var(--gray-light);border-bottom:1.5px solid var(--gray-light);transform:rotate(45deg)}
.e-sel:has(select:focus)::after{border-color:var(--orange)}
.e-f-go{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem;margin-top:.4rem}
.e-f-go .btn-solid{margin:0;border:0;cursor:pointer;font-family:var(--font-body);font-size:1rem;padding:1rem 2.1rem}
.e-f-go p{margin:0;flex:1 1 16rem;font-size:var(--fs-small);line-height:1.55;color:var(--gray)}
.e-f-go p b{font-weight:600;color:var(--gray-light)}
.e-f-go a{color:var(--gray-light)}
.e-dates-card>.e-or{margin-top:var(--sp-4)}

/* ================================================================ newsletter, one line at the foot ==== */
.e-nl{padding:0 var(--edge-x) var(--sp-section)}
html body .e-nl .v2-nl{position:static;margin:0 auto;max-width:var(--measure);padding:var(--sp-3) 0 0;background:none;border:0;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.6rem;animation:none}
.e-nl-t{margin:0;flex:1 1 18rem;font-size:var(--fs-body-s);color:var(--gray-light)}
.e-nl-t b{color:var(--white);font-weight:600}
html body .e-nl .v2-nl-row{flex:1 1 24rem;max-width:30rem;flex-wrap:nowrap}
html body .e-nl .v2-nl-row input{min-height:44px;min-width:0}
.e-nl .btn-lines{background:none;cursor:pointer;font-family:var(--font-body);border-left:0;border-right:0;flex:none}
.e-nl .nl-status{flex-basis:100%;margin:0;font-size:var(--fs-small);color:var(--gray-light)}
.e-nl .nl-status:empty{display:none}

/* ================================================================ the phone bar (S4) ==== */
/* slim, and only when no other orange button is on screen: hidden over the opening and the four, beside any Check
   dates, at the form, at the footer, and while the nav (with its Enquire Now) is shown */
.e-bar{display:none}
@media (max-width:820px){
  /* this page's Enquire Now goes to the same form as the opening's Check dates (H5). On a phone it would sit above the
     opening's button, or, in the nav that comes back on a scroll up, beside a Check dates or over the form itself, so
     here the nav leaves the one orange button to the page: the opening's, a section's, or the bar's (critic-1-10,
     critic-2-2). Matched by its #dates link, so no other page changes. A wide screen keeps the site's header as it is
     (there the two buttons are far apart; the owner's call) */
  .page-wrap>nav .nav-cta[href="#dates"]{display:none}
  .page-wrap>nav:has(.nav-cta[href="#dates"]) .nav-toggle{margin-left:auto}
  /* a field or link reached with the keyboard never lands under the bar (qa-1-2) */
  html:has(.e-bar.show){scroll-padding-bottom:4.75rem}
  .e-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:.8rem;
    padding:.42rem var(--gutter) calc(.42rem + env(safe-area-inset-bottom,0px));background:rgba(20,21,25,.94);border-top:1px solid var(--line);
    transform:translateY(110%);visibility:hidden;transition:transform .3s var(--ease),visibility 0s linear .3s}
  @supports (backdrop-filter:blur(2px)){.e-bar{background:rgba(20,21,25,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}}
  .e-bar.show{transform:none;visibility:visible;transition-delay:0s}
  .e-bar-l{min-width:0}
  .e-bar-l b{display:block;font-family:var(--font-display);font-weight:700;font-size:.86rem;line-height:1.2;color:var(--white)}
  .e-bar-l small{display:block;font-size:.72rem;color:var(--gray-light)}
  .e-bar .btn-solid{flex:none;margin:0;padding:.6rem 1.15rem;font-size:.86rem}
}

/* ================================================================ narrower screens ==== */
@media (max-width:1100px){
  .e-hero-in{grid-template-columns:minmax(0,1fr)}
  .e-shade{background:linear-gradient(90deg,rgba(12,13,17,.5) 0%,rgba(12,13,17,.12) 60%,rgba(12,13,17,0) 80%),
    linear-gradient(180deg,rgba(12,13,17,.45) 0%,rgba(12,13,17,.1) 16%,rgba(12,13,17,.26) 32%,rgba(12,13,17,.7) 44%,rgba(12,13,17,.8) 60%,rgba(16,17,21,.88) 80%,rgba(20,21,25,.96) 100%)}
  html body .e-bug{justify-self:start}
  .e-pk-grid{grid-template-columns:minmax(0,1fr)}
  .e-pk-card{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);column-gap:var(--sp-4);align-items:start}
  .e-pk-card .e-cov{grid-column:1;margin-top:1.2rem}
  .e-pk-card .e-run{margin-top:0;grid-column:2;grid-row:1 / span 3}
  .e-pk-foot{grid-column:1;align-self:end;flex-direction:column;align-items:flex-start}
  .e-pick{position:static;margin-top:.9rem}
  .e-spons{grid-template-columns:minmax(0,1fr)}
  .e-spons ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .e-reach-in,.e-two,.e-del-grid,.e-faq-in{grid-template-columns:minmax(0,1fr)}
  .e-total{text-align:left}
  .e-most{margin-left:0}
  .e-row{grid-template-columns:7.4rem minmax(0,1fr) minmax(4rem,9rem) 6.6rem;grid-template-areas:"d n bar v" "d m m w";row-gap:.35rem}
  .e-row.is-next{grid-template-areas:"d n n n" "d m w w"}
  html body .cta-band .cta-card.e-dates-card{grid-template-columns:minmax(0,1fr);grid-template-areas:none;grid-template-rows:none}
  html body .cta-band .e-dates-card>*{grid-area:auto}
  .e-form{padding-top:0}
  .e-dates-card>.e-cal{margin-top:var(--sp-4)}
}
@media (max-width:900px){
  .md-reel{grid-template-columns:minmax(0,1fr)}
  .md-list{display:flex;gap:.75rem;max-height:none;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;margin-right:calc(-1 * var(--gutter));padding-right:var(--gutter)}
  .md-list::-webkit-scrollbar{display:none}
  .md-list li{flex:none;width:min(46vw,15rem);scroll-snap-align:start}
  .md-list button{grid-template-columns:minmax(0,1fr);gap:.5rem;padding:.4rem}
}
@media (min-width:701px) and (max-width:900px){
  .e-posters{grid-template-columns:repeat(2,minmax(0,1fr))}
  .e-pl:nth-child(2n) .e-when::after{margin-right:0;background:linear-gradient(90deg,var(--edge),transparent)}
  html.e-move .e-posters,html.e-move .e-four-head,html.e-move .e-four-note{max-width:calc(2 * var(--e-pw,300px) + var(--e-gap))}
}
@media (max-width:700px){
  .md-hero .kit-hero-media img{object-position:50% 30%}
  html body .kit-hero .kit-stats{flex-wrap:nowrap;gap:1.2rem}
  html body .kit-hero .kit-stat b{font-size:1.55rem;white-space:nowrap}
  .cta-buttons .btn-lines{align-self:auto;text-align:center}
  /* the opening on a phone (critic-1-5): the shot on top, as wide as the screen and lifted so the wing sits just under
     the nav, its foot feathered into the ground; the words stand on the ground below it. v4-media.js reads --e-lift so
     the move starts from this same frame */
  .e-hero{background:var(--bg)}
  .e-hero-in{padding:1.4rem var(--edge-x) calc(var(--e-nav) + 1rem);gap:1.1rem}
  .e-cam-img{--e-lift:.3;height:auto;object-fit:cover;transform:translateY(calc(var(--e-lift) * -100%));
    -webkit-mask-image:linear-gradient(180deg,#000 64%,transparent 96%);mask-image:linear-gradient(180deg,#000 64%,transparent 96%)}
  /* in the move the feather recedes as the shot comes to cover its poster (v4-media.js sets the two stops) */
  html.e-move .e-cam-img{-webkit-mask-image:linear-gradient(180deg,#000 var(--e-m0,64%),transparent var(--e-m1,96%));mask-image:linear-gradient(180deg,#000 var(--e-m0,64%),transparent var(--e-m1,96%))}
  .e-shade{background:linear-gradient(180deg,rgba(12,13,17,.3) 0%,rgba(12,13,17,.06) 11%,rgba(12,13,17,.06) 24%,rgba(12,13,17,.42) 34%,rgba(13,14,18,.78) 44%,rgba(16,17,21,.9) 58%,rgba(20,21,25,.96) 100%)}
  /* the slate in two rows: the status and its countdown, then the event */
  .e-slate{display:inline-grid;grid-template-columns:auto auto 1fr;justify-content:start;align-items:center;gap:.28rem .55rem;margin-bottom:.8rem;
    padding:.42rem .7rem .42rem .6rem;font-size:.6875rem;letter-spacing:.05em}
  .e-slate>[data-slate-e]{grid-column:1 / -1;grid-row:2}
  .e-kick{font-size:.6875rem;margin-bottom:.6rem}
  .e-hero h1{font-size:clamp(2.6rem,12.4vw,3.2rem);line-height:.98}
  .e-deck{margin-top:.75rem;font-size:.98rem;line-height:1.5}
  /* Book a Call beside Check dates for your event, on one row */
  .e-actions{flex-wrap:nowrap;margin-top:1rem;gap:1rem}
  .e-actions .btn-solid{flex:none;font-size:.88rem;padding:.9rem 1.05rem;white-space:nowrap}
  .e-actions .btn-lines{flex:none;font-size:.88rem;white-space:nowrap}
  /* "Covered for" on its own line over the two logo slots, every word 11px or more (critic-1-3) */
  .e-for{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:.45rem .5rem;margin-top:.95rem}
  .e-for-k{grid-column:1 / -1;font-size:.6875rem;line-height:1.2;letter-spacing:.12em}
  .e-logo{position:relative;min-width:0;padding:.45rem .6rem .5rem}
  .e-logo b{font-size:.95rem}
  .e-logo small{margin-top:.25rem;font-size:.6875rem;line-height:1.3}
  .e-logo em{position:absolute;top:.5rem;right:.55rem;margin:0;font-size:.6875rem;line-height:1;letter-spacing:.1em}
  .e-hero-in{row-gap:.95rem}
  /* the three numbers: each source on two deliberate lines at 12px ("Views" / "PWC Super Final"), never a ragged wrap */
  html body .e-bug{grid-template-columns:repeat(3,auto);width:100%}
  html body .e-bug .kit-stat{padding:.7rem .55rem 0;-webkit-backdrop-filter:none;backdrop-filter:none;background:none}
  html body .e-bug .kit-stat:first-child{padding-left:0}
  html body .e-bug .kit-stat:last-child{padding-right:0}
  html body .e-bug .kit-stat::before{margin:-.7rem -.55rem .6rem}
  html body .e-bug .kit-stat:first-child::before{margin-left:0}
  html body .e-bug .kit-stat:last-child::before{margin-right:0}
  html body .e-bug .kit-stat b{font-size:clamp(1.2rem,5.6vw,1.5rem)}
  html body .e-bug .kit-stat b small{font-size:max(11px,.5em)}
  html body .e-bug .kit-stat>.e-cr{margin-top:.4rem;font-size:12px;line-height:1.3;letter-spacing:0;text-transform:none;color:rgba(246,244,244,.9)}
  html body .e-bug .e-cr span{display:block;white-space:nowrap}
  html body .e-bug .e-cr .e-cr-s{color:rgba(246,244,244,.72)}
  html body .e-bug .e-cr .e-cr-sep{display:none}
  html body .e-bug .kit-stat em{display:none}
  /* the four: a swipe rail of tall posters on the numbered line, the one on air in the middle (P3) */
  :root{--e-pw:min(280px,74vw)}
  .e-four{padding-top:var(--sp-5)}
  .e-posters{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 calc(-1 * var(--edge-x));padding:0 0 .3rem;
    /* the neighbours peek in and fade at the screen's edges, so no word is ever cut by the glass (critic-1-7) */
    -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 1rem,#000 2.6rem,#000 calc(100% - 2.6rem),rgba(0,0,0,.35) calc(100% - 1rem),transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 1rem,#000 2.6rem,#000 calc(100% - 2.6rem),rgba(0,0,0,.35) calc(100% - 1rem),transparent 100%)}
  .e-posters::-webkit-scrollbar{display:none}
  .e-posters::before,.e-posters::after{content:"";flex:0 0 calc((100vw - var(--e-pw)) / 2 - 12px)}
  .e-pl{flex:0 0 var(--e-pw);scroll-snap-align:center}
  .e-when::after{margin-right:-12px}
  html.e-move .e-posters{max-width:none;margin:0 calc(-1 * var(--edge-x))}
  html.e-move .e-four-head,html.e-move .e-four-note{max-width:none}
  html.e-move .e-four-note{display:none}
  .e-poster{--e-pp:.9rem}
  .e-p-t{font-size:1.3rem}
  .e-p-tags{font-size:.78rem}
  .e-p-go{font-size:.78rem;margin-top:.6rem;padding-top:.55rem}
  .e-pk-card{display:flex;align-items:stretch}
  .e-pk-card .e-cov{margin-top:1.1rem}
  .e-pk-card .e-run{margin-top:1rem}
  .e-pk-foot{flex-direction:row;align-items:center;align-self:stretch}
  .e-run li{grid-template-columns:5.2rem minmax(0,1fr);column-gap:.8rem}
  .e-cov span{font-size:.6875rem;letter-spacing:.06em}
  .e-spons ul{grid-template-columns:minmax(0,1fr)}
  .e-reach-band{min-height:clamp(460px,74svh,620px);padding-top:var(--sp-5);padding-bottom:var(--sp-4)}
  .e-reach-in{gap:var(--sp-4)}
  .e-total-n b{font-size:clamp(4.2rem,23vw,6.5rem)}
  .e-two-l{grid-template-columns:minmax(0,1fr);gap:.9rem}
  /* the + between the two audiences: a centred join on a hairline, not a stray glyph (buyer-1-8) */
  .e-plus{display:flex;align-items:center;gap:.9rem;padding:0;font-size:1.35rem}
  .e-plus::before,.e-plus::after{content:"";flex:1 1 0;height:1px;background:var(--line)}
  .e-tl{height:3.2rem}
  .e-tl-m{padding-left:.3rem;font-size:.6875rem;letter-spacing:.06em}
  .e-tl-today i{font-size:.6875rem;letter-spacing:.08em}
  /* the edition and the place each on their own line, no middot at a line's start (critic-1-8) */
  .e-row-n small span{display:block}
  .e-row-n small .e-row-sep{display:none}
  .e-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"d d" "n v" "m m" "bar bar" "w w";row-gap:.45rem;padding:1.1rem 0}
  .e-row.is-next{grid-template-areas:"d d" "n n" "m m" "w w"}
  .e-row-v{align-self:start}
  .e-watch{justify-self:start;padding:.35rem 0 0}
  .e-frames{flex-direction:column;gap:.9rem}
  .e-fr{flex:none;flex-direction:row;align-items:center;gap:1rem}
  .e-fr .e-fr-box{flex:none;height:4.4rem}
  .e-fr.is-169 .e-fr-box{width:7.82rem}.e-fr.is-916 .e-fr-box{width:2.48rem;margin-right:5.34rem}.e-fr.is-still .e-fr-box{width:6.6rem;margin-right:1.22rem}
  .e-fr-box::after{inset:5px;background-size:7px 1px,1px 7px,7px 1px,1px 7px,7px 1px,1px 7px,7px 1px,1px 7px}
  .e-fr b{margin-top:0;font-size:1rem}
  .e-rider{grid-template-columns:minmax(0,1fr)}
  .e-f-row{grid-template-columns:minmax(0,1fr)}
  html body .cta-band .cta-card.e-dates-card{padding-top:3.2rem}
  .e-months{grid-template-columns:repeat(4,minmax(0,1fr))}
  .e-months :is(button,.e-mo)>span{font-size:.6875rem;letter-spacing:.08em}
  .md-grid{--rh:118px}
  .md-play{width:60px;height:60px;margin:-30px 0 0 -30px}
  .md-side .v2-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:calc(-1 * var(--gutter));padding-right:var(--gutter)}
  .md-side .v2-chips::-webkit-scrollbar{display:none}
  .md-side .v2-chip{flex:none}
  .md-now h3{font-size:1rem}
  .md-meta .md-ep{flex-basis:100%}
  .md-meta .md-ep::before{content:none}
  html body .e-nl .v2-nl-row{flex-basis:100%;max-width:none}
  .v4i-fl-lbh{display:none}.v4i-fl-lb img{max-width:100vw;max-height:78vh;border-radius:0}.v4i-fl-lbc{bottom:1rem;max-width:calc(100vw - 2.5rem)}
  .v4i-fl-lbn{top:auto;bottom:4rem;transform:none}.v4i-fl-lbp{left:auto;right:4.4rem}.v4i-fl-lbnx{right:1rem}.v4i-fl-lbx,.v4i-fl-lbn{width:2.75rem;height:2.75rem}
}
@media (max-width:700px) and (max-height:799px){
  /* a shorter phone (the owner's 390x683): the three numbers sit just below the fold, so the shot and the promise have
     the first screen; the first scroll (the nav leaving) brings them up before the move starts (critic-1-5) */
  .e-cam-img{--e-lift:.33}
  .e-hero-in{padding-bottom:1rem}
}
@media (max-width:700px) and (max-height:720px){
  .e-hero h1{font-size:clamp(2.3rem,11vw,2.8rem)}
  .e-deck{font-size:.94rem;line-height:1.5}
  .e-slate{margin-bottom:.7rem}
}
/* short laptops and landscape tablets: the opening's words sized to the height too, so they fit above the fold */
@media (min-width:701px) and (max-height:820px){
  .e-hero h1{font-size:clamp(2.8rem,min(7.2vw,10.5vh),6.7rem)}
  .e-hero-in{padding-top:clamp(3.5rem,9vh,7rem)}
  .e-slate{margin-bottom:clamp(.7rem,2vh,1.6rem)}
  .e-deck{margin-top:clamp(.8rem,2vh,1.4rem)}
  .e-actions,.e-for{margin-top:clamp(.9rem,2.4vh,2rem)}
  html body .e-bug .kit-stat em{display:none}
  html body .e-bug .kit-stat span{margin-bottom:.8rem}
}
@media (max-width:370px){
  .e-actions{flex-wrap:wrap}
  .e-logo em{position:static;margin-top:.2rem}
  .md-list li{width:50vw}
}

/* ================================================================ reduced motion: the finished page ==== */
@media (prefers-reduced-motion:reduce){
  .e-poster,.e-poster img,.md-frame>img,.md-ph img,.e-row-bar i,.e-bar,.e-p-tally,.e-pk-card,.md-play,.e-watch i,.e-p-go i,.md-meta a i,.e-field input,
  .e-pl :is(.e-poster>span,.e-in){transition:none}
  .e-poster:hover{translate:none}.e-poster:hover img,.md-frame:hover>img,.md-ph a:hover img{transform:none}
  .v4i-fl-lb,.v4i-fl-lb img,.v4i-fl-lbx{transition:none}
}
@media print{html.e-move .e-pull{height:auto}html.e-move .e-stage{position:static;height:auto}.e-bar{display:none}}