:root{--tp-mark:url("data:image/png;base64,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")}
/* ==========================================================================
   THE POSITION — MOBILE
   Built on the Variety Partners mobile master, bone for bone. Every rule is
   inside a width gate, so nothing here can reach the desktop at any
   specificity. site.css is not edited; this loads after it, below 900 only.

   VP's mobile skeleton, lifted exactly:

     .hd        header, 56 tall, gutter 18, sticky, hairline under
     .hero      24 / 22 / 34, eyebrow, h1, rule, lead, buttons
     section    padding 24px 0, hairline over
       .pad     0 22            <- the gutter is 22 and lives on the inner block
       .eyebrow 11 / 2.5 / orange / 700
       h2.sec   23, 6 under the eyebrow
       .hint    11 / 1 / #9a9488, 6 under the title, "N THINGS -> SWIPE"
       .car     side-scrolling snap rail, gap 14, padding 14 22 18
         card   flex 0 0 80%, white, hairline, radius 16, soft shadow
       .dots    6px dots, the live one an orange 20px pill
     footer     32 / 22 / 34

   The section's frame is VP's flat 24, not a solver. VP is even because every
   section carries the same padding and the same head, and that is the rule.
   ========================================================================== */

@media (max-width:760px){

/* --------------------------------------------------------------- tokens */
:root{--gut:22px;--m-pad:22px;--m-frame:24px}

/* ------------------------------------------------------- 1 · the header */
.mobx > header{
 height:56px!important;min-height:56px!important;
 padding:0 18px!important;
 background:#faf7f2!important;border-bottom:1px solid #e5e0d5!important;
 position:sticky!important;top:0!important;z-index:5!important;box-sizing:border-box!important}
.mobx > header .nav{
 height:56px!important;padding:0!important;
 display:flex!important;align-items:center!important;justify-content:space-between!important}
.mobx > header .brand{font:400 17px/1 var(--tp-serif)!important;letter-spacing:0!important}
.mobx > header .tpnav, .mobx > header .tpsubbtn{display:none!important}
.mobx > header .burger{display:block!important;font-size:22px!important;background:none!important;border:0!important}

/* ------------------------------------------------- 2 · the head banners */
/* VP's .hero: one padded block, no locked band, no centring */
.mobx div.mast.mast.mast, .mobx div.pmast.pmast.pmast,
.mobx section.tpgh.tpgh.tpgh, .mobx div.art.art.art{
 height:auto!important;min-height:0!important;max-height:none!important;
 overflow:visible!important;
 padding:24px 22px 34px!important;box-sizing:border-box!important}
.mobx div.pmast.pmast.pmast, .mobx section.tpgh.tpgh.tpgh, .mobx div.art.art.art{
 display:block!important}
/* the home masthead stays a flex column: its children carry `order`, and a block
   box throws that away — which is what put the date under the subscribe button. */
.mobx div.mast.mast.mast{
 display:flex!important;flex-direction:column!important;align-items:center!important;
 justify-content:flex-start!important;text-align:center!important}
.mobx div.mast.mast.mast > *{margin-left:auto!important;margin-right:auto!important}
.mobx div.pmast .eyebrow, .mobx section.tpgh .tpgh-eyebrow, .mobx div.art .crumb{
 font:700 11px/1 var(--tp-sans)!important;letter-spacing:2.5px!important;
 text-transform:uppercase!important;color:#876c22!important;display:block!important}
.mobx div.pmast h1, .mobx section.tpgh h1{
 font:600 24px/1.18 var(--tp-serif)!important;letter-spacing:-.3px!important;
 margin:14px 0 0!important}
.mobx div.art h1{
 font:600 24px/1.22 var(--tp-serif)!important;letter-spacing:-.3px!important;
 margin:14px 0 0!important}
.mobx div.pmast .pm-sub, .mobx section.tpgh .pm-sub{
 font:400 14px/1.5 var(--tp-serif)!important;color:#4a4a52!important;
 display:block!important;margin:10px 0 0!important}
.mobx div.pmast .pm-rule, .mobx section.tpgh .pm-rule{
 display:block!important;width:44px!important;height:3px!important;
 background:#c4ab67!important;margin:16px 0 0!important}
.mobx div.pmast p, .mobx section.tpgh p, .mobx div.art .dek{
 font:400 14px/1.5!important;color:#4a4a52!important;margin:16px 0 0!important}
.mobx div.art .byline{
 font:700 11px/1 var(--tp-sans)!important;letter-spacing:1.4px!important;
 text-transform:uppercase!important;color:#8a857c!important;margin:16px 0 0!important}
/* the lead's own line break stays on the phone. Variety keeps its break at 393
   (its lead reads "Campaigns and launches for / brands you already know"), and
   with the display periods dropped the two statements ran into one another
   ("...and five more No account, no app, nothing to install"). */
.mobx div.pmast br.dbr, .mobx section.tpgh br.dbr{display:inline!important}
/* the rail is a desktop device */
.mobx .tp-rail{display:none!important}

/* --------------------------------------------------- 3 · every section */
.mobx > section.cover.cover.cover, .mobx section.tpmore.tpmore.tpmore,
.mobx section.tpsay.tpsay.tpsay, .mobx section.tpgames.tpgames.tpgames,
.mobx section.pbody.pbody.pbody{
 height:auto!important;min-height:0!important;max-height:none!important;
 padding:24px 0!important;box-sizing:border-box!important;
 border-top:1px solid #e5e0d5!important;border-bottom:0!important}
/* .pad — the 22 gutter lives on the inner block so a rail can bleed */
.mobx > section.cover.cover.cover > .tpsec-hd,
.mobx > section.cover.cover.cover > .tpf-row,
.mobx section.tpmore .tpmore-in > .tpmore-hd,
.mobx section.tpgames .tpg-in > .tpg-hd,
.mobx section.tpsay .tpsay-in,
.mobx section.pbody > *{
 padding-left:22px!important;padding-right:22px!important;box-sizing:border-box!important}
.mobx section.tpmore .tpmore-in, .mobx section.tpgames .tpg-in{
 padding-left:0!important;padding-right:0!important}

/* ------------------------------------------------ 4 · the section head */
/* eyebrow (the ::before kicker) / title / hint — VP's three lines */
.mobx section .tpsec-hd h2::before,
.mobx section .tpmore-hd h2::before,
.mobx section .tpg-hd h2::before{
 display:block!important;margin:0 0 6px!important;
 font:700 11px/1 var(--tp-sans)!important;letter-spacing:2.5px!important;
 text-transform:uppercase!important;color:#876c22!important}
.mobx section .tpsec-hd h2,
.mobx section .tpmore-hd h2,
.mobx section .tpg-hd h2{
 font:600 23px/1.12 var(--tp-serif)!important;letter-spacing:-.3px!important;
 color:#141416!important;margin:0!important}
.mobx section .tpmore-hd, .mobx section .tpg-hd{
 display:block!important;margin:0!important;padding:0 22px!important}
/* the "see the archive" / "eight of them" line becomes VP's hint */
.mobx section .tpmore-hd a,
.mobx section .tpg-hd a,
.mobx section .tpg-hd span{
 display:block!important;margin:6px 0 0!important;padding:0!important;
 font:400 11px/1.3 var(--tp-sans)!important;letter-spacing:1px!important;
 text-transform:uppercase!important;color:#9a9488!important;
 border:0!important;text-decoration:none!important;font-style:normal!important;
 width:auto!important;text-align:left!important}
.mobx section .tpmore-hd a::after,
.mobx section .tpg-hd a::after{content:" \2192"!important;color:#876c22!important;font-weight:700!important}

/* ------------------------------------------- 5 · the side-scrolling rail */
.mobx section.tpmore .tpmore-grid.tpmore-grid,
.mobx section.tpgames .tpg-grid.tpg-grid{
 display:flex!important;flex-direction:row!important;
 grid-template-columns:none!important;grid-auto-rows:auto!important;
 gap:14px!important;row-gap:14px!important;column-gap:14px!important;
 overflow-x:auto!important;overflow-y:visible!important;
 scroll-snap-type:x mandatory!important;-webkit-overflow-scrolling:touch!important;
 scrollbar-width:none!important;
 padding:14px 22px 18px!important;margin:0!important;
 align-items:stretch!important}
.mobx section.tpmore .tpmore-grid::-webkit-scrollbar,
.mobx section.tpgames .tpg-grid::-webkit-scrollbar{display:none!important}

/* the reading cards */
.mobx section.tpmore .tpmore-grid a.tpmore-c{
 flex:0 0 80%!important;width:80%!important;max-width:80%!important;
 scroll-snap-align:center!important;
 background:#fff!important;border:1px solid rgba(20,20,22,.07)!important;
 border-radius:16px!important;overflow:hidden!important;padding:0!important;
 box-shadow:0 10px 26px rgba(20,20,22,.08)!important;
 display:flex!important;flex-direction:column!important}
.mobx section.tpmore .tpmore-grid a.tpmore-c img{
 width:100%!important;height:auto!important;aspect-ratio:16/9!important;
 object-fit:cover!important;display:block!important;margin:0!important}
.mobx section.tpmore .tpmore-grid a.tpmore-c .k{
 font:700 11px/1 var(--tp-sans)!important;letter-spacing:1.6px!important;
 text-transform:uppercase!important;color:#876c22!important;margin:15px 15px 0!important;display:block!important}
.mobx section.tpmore .tpmore-grid a.tpmore-c h3{
 font:600 20px/1.16 var(--tp-serif)!important;letter-spacing:-.3px!important;
 color:#141416!important;margin:7px 15px 0!important}
.mobx section.tpmore .tpmore-grid a.tpmore-c p{
 font:400 13.5px/1.45 var(--tp-sans)!important;color:#4a4a52!important;margin:7px 15px 0!important}
.mobx section.tpmore .tpmore-grid a.tpmore-c .d{
 font:400 11px/1 var(--tp-sans)!important;letter-spacing:1.2px!important;
 text-transform:uppercase!important;color:#9a9488!important;margin:12px 15px 16px!important;display:block!important}

/* the puzzle cards */
.mobx section.tpgames .tpg-grid a.tpg-item.tpg-item{
 flex:0 0 66%!important;width:66%!important;max-width:66%!important;min-width:0!important;
 scroll-snap-align:center!important;display:flex!important;flex-direction:column!important;
 background:#fff!important;border:1px solid rgba(20,20,22,.07)!important;
 border-radius:16px!important;box-shadow:0 10px 26px rgba(20,20,22,.08)!important;
 padding:20px 18px 16px!important}
.mobx section.tpgames .tpg-grid a.tpg-item:nth-child(n+5){display:flex!important}
.mobx section.tpgames .tpg-grid a.tpg-item .tpg-n{
 font:600 19px/1.14 var(--tp-serif)!important;letter-spacing:-.3px!important;color:#141416!important}
.mobx section.tpgames .tpg-grid a.tpg-item .tpg-d{
 font:400 13.5px/1.42 var(--tp-sans)!important;color:#4a4a52!important;margin:7px 0 0!important}
/* 2026-09-17: the home shelf was hiding the game mark, so the home cards read as
   words where the Puzzles page reads as a game. Same card, both pages. */
.mobx section.tpgames .tpg-grid a.tpg-item .tpg-art{
 display:flex!important;width:100%!important;padding:16px 0 0!important;margin:0!important;
 align-items:flex-end!important;justify-content:flex-start!important;flex:1 1 auto!important}
.mobx section.tpgames .tpg-grid a.tpg-item .tpg-art svg{
 width:auto!important;height:70px!important;max-height:70px!important}
.mobx section.tpgames .tpg-grid a.tpg-item::after{
 font:700 10px/1 var(--tp-sans)!important;letter-spacing:2px!important;
 color:#9a9488!important;margin:16px 0 0!important}

/* ------------------------------------------------------- 6 · the dots */
.mobx .m-dots{display:flex!important;justify-content:center!important;gap:6px!important;
 margin:2px 0 0!important;padding:0 22px!important}
.mobx .m-dot{width:6px!important;height:6px!important;border-radius:50%!important;
 background:#d8d2c6!important;border:0!important;padding:0!important;cursor:pointer!important;
 transition:width .25s,background .25s!important}
.mobx .m-dot.on{background:#c4ab67!important;width:20px!important;border-radius:3px!important}

/* ---------------------------------------------------- 7 · the feature */
.mobx > section.cover.cover.cover .tpf-row{display:block!important}
.mobx > section.cover.cover.cover .tpf-col{width:100%!important}
.mobx > section.cover.cover.cover .tpf-col .eyebrow{
 font:700 11px/1 var(--tp-sans)!important;letter-spacing:2.5px!important;
 text-transform:uppercase!important;color:#876c22!important;display:block!important;margin:0!important}
.mobx > section.cover.cover.cover .tpf-col h2{
 font:600 23px/1.16 var(--tp-serif)!important;letter-spacing:-.3px!important;margin:12px 0 0!important}
.mobx > section.cover.cover.cover .tpf-col .dek{
 font:400 14px/1.5 var(--tp-sans)!important;color:#4a4a52!important;margin:12px 0 0!important}
.mobx > section.cover.cover.cover .tpf-col .byline{
 font:700 11px/1 var(--tp-sans)!important;letter-spacing:1.4px!important;
 text-transform:uppercase!important;color:#9a9488!important;margin:14px 0 0!important}
.mobx > section.cover.cover.cover .tpf-col .readmore{
 display:inline-block!important;margin:16px 0 0!important;
 font:700 11px/1 var(--tp-sans)!important;letter-spacing:1.8px!important;text-transform:uppercase!important}
.mobx > section.cover.cover.cover .cover-img{
 width:100%!important;max-width:100%!important;margin:20px 0 0!important;
 border-radius:16px!important;overflow:hidden!important}
.mobx > section.cover.cover.cover .cover-img img{border-radius:16px!important}
/* the head above the feature keeps the section's own head rule */
.mobx > section.cover.cover.cover > .tpf-row{margin-top:20px!important}

/* ------------------------------------------------------ 8 · the brief */
.mobx section.tpsay .tpsay-body > p{
 font:400 14px/1.55 var(--tp-serif)!important;color:#4a4a52!important;margin:16px 0 0!important}
.mobx section.tpsay .tpsay-body > p br{display:none!important}
.mobx section.tpsay .tpsay-right{margin:22px 0 0!important}
.mobx section.tpsay .tpsay-bhd{margin:0 0 10px!important}
.mobx section.tpsay .tpsay-bhd .k{
 font:700 11px/1 var(--tp-sans)!important;letter-spacing:2.5px!important;
 text-transform:uppercase!important;color:#876c22!important}
.mobx section.tpsay .tpsay-beats.tpsay-beats{
 display:block!important;grid-template-columns:none!important;margin:0!important}
.mobx section.tpsay .tpsay-beats.tpsay-beats li{
 display:block!important;padding:11px 0!important;margin:0!important;
 border-top:1px solid #e5e0d5!important;border-bottom:0!important}
.mobx section.tpsay .tpsay-beats.tpsay-beats li:first-child{border-top:0!important;padding-top:0!important}
.mobx section.tpsay .tpsay-beats.tpsay-beats li:last-child{padding-bottom:0!important}
.mobx section.tpsay .tpsay-beats .k{
 font:700 11px/1 var(--tp-sans)!important;letter-spacing:1.6px!important;
 text-transform:uppercase!important;color:#141416!important;display:block!important;margin:0 0 5px!important}
.mobx section.tpsay .tpsay-beats .v{
 font:400 13.5px/1.45 var(--tp-sans)!important;color:#4a4a52!important;display:block!important}

/* ------------------------------------------------- 9 · the article body */
.mobx div.abody.abody.abody{
 padding:24px 22px!important;box-sizing:border-box!important;
 height:auto!important;min-height:0!important}
.mobx div.abody h2{font:600 20px/1.2 var(--tp-serif)!important;margin:26px 0 0!important}
.mobx div.abody p{font:400 15px/1.62 var(--tp-serif)!important;color:#2c2a2f!important;margin:14px 0 0!important}
.mobx div.abody .aimg{margin:0 0 20px!important}
.mobx div.abody .aimg img{width:100%!important;height:auto!important;
 border-radius:16px!important;display:block!important}

/* ------------------------------------------------------ 10 · the footer */
/* NOT .mobx: index.html carries the footer as a direct child of <body> while the
   other pages nest it inside .mobx, so every .mobx-prefixed rule here was dead on
   the home page - which is why the home footer was #191712 and the rest #0e0e10.
   Keyed off the doubled class instead, so it lands on every page shape. */
footer.tpfoot.tpfoot{height:auto!important;min-height:0!important;max-height:none!important;
 background:#191712!important}   /* was #0e0e10 - two different blacks against the
    desktop footer. Now the desktop's own colour on every page. */
footer.tpfoot.tpfoot>.tpf-in{height:auto!important;min-height:0!important;
 padding:34px 22px 31.5px!important;
 display:block!important}
 /* MEASURED ink air: desktop is 38.0 above the first glyph and 33.0 below the last
    in a 153 band. 36/35 of padding puts the phone on 38.0/33.0. The phone also runs
    under the home indicator; 2026-10-18 (same as Variety) no inset is added - the footer keeps one height on
    every phone and the dark canvas below it paints the home-indicator strip. */
footer.tpfoot.tpfoot .tpf-row1,
footer.tpfoot.tpfoot .tpf-row2{
 display:block!important;width:100%!important;position:static!important;height:auto!important}
footer.tpfoot.tpfoot .tpf-mark{display:inline-flex!important;position:static!important;margin:0!important}
footer.tpfoot.tpfoot .tpf-mid{
 position:static!important;display:flex!important;flex-wrap:wrap!important;
 gap:0 18px!important;width:auto!important;justify-content:flex-start!important;margin:11.5px 0 0!important}
footer.tpfoot.tpfoot .tpf-mid a{
 font:700 11px/2.1 var(--tp-sans)!important;letter-spacing:1.5px!important;text-transform:uppercase!important}
footer.tpfoot.tpfoot .tpf-sub{position:static!important;width:100%!important;max-width:none!important;
 margin:0!important}
footer.tpfoot.tpfoot .tpf-row2{margin-top:17px!important}
footer.tpfoot.tpfoot .tpf-pub{position:static!important;display:block!important;margin:26px 0 0!important;
 text-align:left!important}  /* it was the one centred block in a left-aligned stack */
footer.tpfoot.tpfoot .tpf-top{position:static!important;display:inline-block!important;margin:2.5px 0 0!important}
footer.tpfoot.tpfoot .tpf-soc{position:static!important;display:flex!important;width:auto!important;
 gap:46px!important;justify-content:flex-start!important;margin:21px 0 0!important}


/* ==========================================================================
   VARIETY MIRROR — the phone's section header (2026-09-14)
   Measured on varietypartners at 393 x 852 / dpr 3:

     section top -> header box      25.00
     gutter                         22        (painted left 21.5)
     eyebrow                        11 / 18.1 / 700 / +2.5px / uppercase / rgb(196,171,103)
     eyebrow box -> headline box    6.00
     headline                       23 / 26 / 600 / -0.3px
     headline -> grey label         6.00   (the label drops to a THIRD LINE on the
                                            gutter, it is not top-right on the phone)
     grey label                     11 / 19.8 / 400 / +1px / uppercase / rgb(154,148,136)
     rule under the header          NONE
     section boundary line          NONE   (desktop only)

   The Position was running four gutters (46 / 0 / 22 / 22), two headline sizes
   (19 and 23), a 10/10 eyebrow sitting ON the headline's line, a grey line on
   every section and no label at all.

   Every selector carries five classes: site.css's own phone rules run as heavy
   as 3 classes + 3 elements and a lighter rule never lands.
   ========================================================================== */

/* 1 · the section divider. CORRECTED 2026-09-14: Variety's HOME page draws these
       on the phone too - 1px rgb(20,20,22), full bleed 0 -> 393, on every
       section boundary (Y873.1 / Y1103.7 / Y1555.6 / Y1941.3 at 393). The earlier
       reading of 0px came off Variety's INNER pages, whose first section sits
       directly under the banner and so has no boundary to draw.
       The first section after the banner carries none - the banner's own bottom
       line is that join, and two borders on one join paint 2px. */
.mobx.mobx > section.cover.cover,
.mobx.mobx > section.tpsay.tpsay,
.mobx.mobx > section.tpmore.tpmore,
.mobx.mobx > section.tpgames.tpgames,
.mobx.mobx > section.pbody.pbody.pbody,
.mobx.mobx > section.section.section,
/* the home page's Latest Stories section carries NO class at all, so a rule
   written from the class list skipped it and it was the one join with no line */
.mobx.mobx > section:not([class]),
.mobx.mobx > section[class=""]{
 border-top:1px solid rgb(20,20,22)!important;border-bottom:0!important}
/* the join under the banner is the banner's own line - one border per join, or
   it paints 2px. Five classes, because the divider rule above carries four. */
.mobx.mobx.mobx.mobx.mobx > div.mast.mast + section,
.mobx.mobx.mobx.mobx.mobx > div.pmast.pmast + section,
.mobx.mobx.mobx.mobx.mobx > section.tpgh.tpgh + section,
.mobx.mobx.mobx.mobx.mobx > div.art.art + section{border-top:0!important}

/* 1b · the section frame: Variety runs 24 top / 24 bottom on the phone */
.mobx.mobx > section.cover.cover,
.mobx.mobx > section.tpsay.tpsay,
.mobx.mobx > section.tpmore.tpmore,
.mobx.mobx > section.tpgames.tpgames{padding-bottom:24px!important}

/* 2 · one gutter. The cover's section carries 46 on the phone and its head adds
       22 on top, which is why that title started at 68 and no other did. */
.mobx.mobx > section.cover.cover.cover{padding-left:22px!important;padding-right:22px!important}
.mobx.mobx > section.cover.cover .tpsec-hd.tpsec-hd.tpsec-hd{padding-left:0!important;padding-right:0!important}
/* the brief's row becomes a stack on the phone - head, lead, categories - so the
   head is never a column beside its own body */
.mobx.mobx > section.tpsay.tpsay .tpsay-in.tpsay-in{display:block!important}
.mobx.mobx > section.tpsay.tpsay .tpsay-in.tpsay-in > *{width:auto!important;max-width:none!important}
/* the blocks in the stack carry no top margin of their own - vpBody sets the one
   gap under the head (28) and the rhythm between them. The lead was sitting 98.4
   below the head because it kept a desktop column margin. */
.mobx.mobx > section.tpsay.tpsay .tpsay-in.tpsay-in > *:not([data-vpgap]){margin-top:0!important}
.mobx.mobx > section.tpsay.tpsay .tpsec-hd.tpsec-hd.tpsec-hd{
 flex:1 1 100%!important;width:100%!important;padding-left:0!important;padding-right:0!important}
.mobx.mobx > section.tpmore.tpmore .tpmore-hd.tpmore-hd.tpmore-hd,
.mobx.mobx > section.tpgames.tpgames .tpg-hd.tpg-hd.tpg-hd{
 padding-left:22px!important;padding-right:22px!important}

/* 3 · the head is one stacked block, never a row */
.mobx.mobx .tpsec-hd.tpsec-hd.tpsec-hd,
.mobx.mobx .tpmore-hd.tpmore-hd.tpmore-hd,
.mobx.mobx .tpg-hd.tpg-hd.tpg-hd{
 display:block!important;position:static!important;
 max-width:none!important;margin:0!important;
 border-bottom:0!important;text-align:left!important}

/* 4 · the eyebrow — The Position paints it as the h2's ::before */
.mobx.mobx .tpsec-hd.tpsec-hd.tpsec-hd h2::before,
.mobx.mobx .tpmore-hd.tpmore-hd.tpmore-hd h2::before,
.mobx.mobx .tpg-hd.tpg-hd.tpg-hd h2::before{
 display:block!important;
 font:700 11px/18.1px var(--tp-sans,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif)!important;
 letter-spacing:2.5px!important;text-transform:uppercase!important;
 color:#876c22!important;margin:0 0 6px 0!important;padding:0!important;
 height:auto!important;width:auto!important;background:none!important}

/* 5 · one headline size on every section */
.mobx.mobx .tpsec-hd.tpsec-hd.tpsec-hd h2,
.mobx.mobx .tpmore-hd.tpmore-hd.tpmore-hd h2,
.mobx.mobx .tpg-hd.tpg-hd.tpg-hd h2{
 margin:0!important;padding:0!important;text-align:left!important;
 font-family:"Iowan Old Style",Georgia,"Times New Roman",Times,serif!important;
 font-size:23px!important;line-height:25.3px!important;font-weight:600!important;
 letter-spacing:-.3px!important;color:rgb(20,20,22)!important}

/* 6 · the grey label, third line, on the gutter */
.mobx.mobx .tplab.tplab.tplab{
 position:static!important;display:block!important;
 margin:6px 0 0 0!important;padding:0!important;border:0!important;background:none!important;
 width:auto!important;max-width:none!important;text-align:left!important;white-space:normal!important;
 font:400 11px/19.8px var(--tp-sans,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif)!important;
 letter-spacing:1px!important;text-transform:uppercase!important;
 color:rgb(154,148,136)!important;text-decoration:none!important}
.mobx.mobx .tplab.tplab.tplab::before,
.mobx.mobx .tplab.tplab.tplab::after{display:none!important;content:none!important}

/* 6a · the puzzle rail runs on the same numbers as the story rail: 14 of gap and
        a card at 80% so the next one shows. It was 16 and a full-width 349, so
        nothing peeked and the row did not read as a rail. */
.mobx.mobx.mobx > section.tpgames .tpg-grid.tpg-grid{gap:14px!important}
.mobx.mobx.mobx > section.tpgames .tpg-grid.tpg-grid > a.tpg-item.tpg-item.tpg-item,
.mobx.mobx.mobx > section.tpgames .tpg-grid.tpg-grid > *{
 flex:0 0 80%!important;flex-basis:80%!important;
 width:80%!important;max-width:80%!important;min-width:0!important;
 scroll-snap-align:center!important}

/* 6b · the swipe cue, Variety's: the grey label ends with an orange arrow and
        SWIPE on any section whose row actually scrolls sideways */
.mobx.mobx section[data-rail] .tplab.tplab.tplab::after{
 content:"  \2192  SWIPE"!important;display:inline!important;
 color:#876c22!important;font-weight:700!important;letter-spacing:1px!important}

/* 7 · no rule under the head */
.mobx.mobx .tprule.tprule.tprule{display:none!important}

/* 8 · the cover's row carried its own 22 on top of the section's, so the story
       inside it started at 44 while its own head started at 22 */
.mobx.mobx > section.cover.cover .tpf-row.tpf-row{padding-left:0!important;padding-right:0!important}

/* 9 · the banner's closing line is Variety's 1px taupe on the phone too — The
       Position was running 2px black. Measured on Variety at 393: the nav strip
       closes on 1px rgb(229,224,213) and the banner under it on 1px taupe. */
/* 2026-09-17: the banner now closes on the HEADER'S OWN hairline, phone and
   desktop alike - rgb(229,224,213), not the taupe boundary. On Variety you
   never see that taupe because the hero above it is a near-black photograph;
   every banner on The Position is pale, so it read as a dark bar. The banner
   is framed by two identical lines, the nav strip's above and this below. */
.mobx.mobx.mobx > div.mast.mast.mast.mast.mast.mast,
.mobx.mobx.mobx > div.pmast.pmast.pmast.pmast.pmast.pmast,
.mobx.mobx.mobx div.art.art.art.art.art.art,
.mobx.mobx.mobx section.tpgh.tpgh.tpgh.tpgh.tpgh.tpgh{
 border-bottom:1px solid rgb(229,224,213)!important;border-top:0!important}
.mobx.mobx.mobx > header.header.header.header,
.mobx.mobx.mobx > header{border-bottom:1px solid rgb(229,224,213)!important}


/* ==========================================================================
   THE MASTHEAD — the phone's banner is the desktop's banner, scaled (2026-09-15)

   Desktop at 1512, measured on .tpm:
     mast top -> eyebrow      83.9
     eyebrow -> wordmark      23.8
     wordmark                 84.0 tall
     wordmark -> rule         30.0
     rule -> lead             23.0
     order: eyebrow / wordmark / orange rule / one line of lead. No date, no button.

   The phone's wordmark is 47.2 tall, so the scale is 47.2 / 84 = 0.562, and every
   gap above is taken down by it. The TYPE is not scaled - 13px of eyebrow becomes
   7.3 and is unreadable - it stays on Variety's phone sizes, which the rest of
   this sheet already uses.
   ========================================================================== */

/* the date and the subscribe button are not on the desktop banner */
.mobx.mobx.mobx > div.mast .dm-date-s,
.mobx.mobx.mobx > div.mast .mastcta{display:none!important}

/* the schedule is ONE line, the way the desktop writes it */
.mobx.mobx.mobx > div.mast .sched br,
.mobx.mobx.mobx > div.mast .sched .schbr{display:none!important}
.mobx.mobx.mobx > div.mast .sched{white-space:nowrap!important;margin-top:12.9px!important}

/* the frame, scaled from the desktop's */
.mobx.mobx.mobx > div.mast.mast.mast.mast.mast.mast{
 padding-top:47.1px!important;padding-bottom:34px!important;
 /* the gutter is 22 like every other block. It was 46, which left the eyebrow a
    301 column for a 301 line - so "AN EDITORIAL BY VARIETY PARTNERS" wrapped. */
 padding-left:22px!important;padding-right:22px!important}
/* the masthead's type is the desktop's, scaled. Measured at 1512:
     eyebrow   13 / 21.19 / 700 / +2.99px / uppercase / rgb(139,135,129) sans
     schedule  18.2 / 29.12 / 400 / rgb(74,74,82) SANS
   The phone was running the eyebrow in rgb(20,20,22) at +3.2px and the schedule
   in Iowan Old Style. Sizes stay scaled; colour, tracking and family do not. */
.mobx.mobx.mobx > div.mast .masteyebrow.masteyebrow{
 color:rgb(139,135,129)!important;letter-spacing:2.99px!important;
 font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important}
.mobx.mobx.mobx > div.mast .sched.sched{
 color:rgb(74,74,82)!important;
 font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important}

.mobx.mobx.mobx > div.mast .masteyebrow{margin:0!important;
 /* the +2.5px of tracking after the last S is inside the box and paints nothing,
    so a centred line sits 1.67 LEFT of centre. Measured on the pixels, not the
    box: painted 41.33 -> 348.33, centre 194.83 against the page's 196.5. */
 text-indent:2.5px!important}

.mobx.mobx.mobx > div.mast .mastrule{margin-top:16.9px!important;margin-bottom:0!important}


/* ==========================================================================
   THE DROP-DOWN — Variety's, measured with its menu open at 393 x 852 (2026-09-15)

     panel          fixed, top 0, full width, HEIGHT OF ITS CONTENT (441.6, not
                    the whole page), bg rgb(14,14,16), padding 64 / 22 / 26,
                    z 80, shadow rgba(0,0,0,.6) 0 26px 50px -18px
     link           20 / 24 / 400 / -0.2px, white, padding 15px 2px,
                    1px rgba(255,255,255,.10) under each
     caption        9.5 / 11.4 / +1.8px, uppercase, rgb(125,122,116)
     the CTA        LAST in the list, an orange pill of its own width, centred,
                    44 tall, 0 22px of padding, 14 / 16.8 / 600
     the top row    the page's own header, turned dark, reading "Menu" with the X

   The Position's panel was hanging from 56 and running the full 2246 of the page,
   its Subscribe was a full-width bar in the MIDDLE of the list, and Archive was
   missing from it altogether.
   ========================================================================== */
.mobx.mobx.mobx .mmenu.mmenu.mmenu{
 top:0!important;bottom:auto!important;height:auto!important;
 max-height:calc(calc(100 * var(--vh, 1vh)) - 56px)!important;overflow-y:auto!important;
 padding:64px 22px 26px!important;
 /* Variety rounds the two BOTTOM corners only - 20px - so the panel reads as a
    sheet dropped over the page, not a full screen. Measured: 0 0 20px 20px. */
 border-radius:0 0 20px 20px!important;
 box-shadow:0 26px 50px -18px rgba(0,0,0,.6)!important}

/* the last link closes the list, so no hairline hangs under it */
.mobx.mobx.mobx .mmenu.mmenu nav > a:last-of-type{border-bottom:0!important}

/* the CTA is a pill of its own width, centred, and it comes last */
.mobx.mobx.mobx .mmenu.mmenu nav{display:flex!important;flex-direction:column!important}
/* the hairline under each link runs STRAIGHT ACROSS the column, 22 -> 371, not
   to the end of each link's own text. (Variety's shrink to the text; on The
   Position they run the full width - asked for 2026-09-15.) */
.mobx.mobx.mobx .mmenu.mmenu nav{align-items:stretch!important}
.mobx.mobx.mobx .mmenu.mmenu nav > a:not(.cta){
 display:block!important;width:100%!important;align-self:stretch!important}

.mobx.mobx.mobx .mmenu.mmenu nav > a.cta{
 order:2!important;align-self:flex-end!important;
 width:auto!important;min-width:0!important;height:44px!important;
 display:inline-flex!important;align-items:center!important;justify-content:center!important;
 padding:0 22px!important;margin:26px 0 0!important;border:0!important;border-radius:99px!important;
 background:rgb(196,171,103)!important;color:#fff!important;
 font:600 14px/16.8px "Iowan Old Style",Georgia,serif!important;letter-spacing:-.2px!important}
.mobx.mobx.mobx .mmenu.mmenu nav > a:not(.cta){order:1!important}

/* the page's header sits over the open panel, dark, and reads Menu */
/* 2026-09-21: the sheet is the header's paper now, the way Variety's is.
   Measured on Variety with its menu open: header bg = its paper (NOT
   transparent - that was the old dark-sheet build), brand ink at font-size 0,
   ::after "Menu" at 400 17/20 the brand serif, close mark ink. */
.mobx.mobx.mobx > header:has(~ .mmenu.open){
 /* it STAYS fixed at 0 over the open sheet - relative dropped it 56 (the
    padding the fixed header pays for) and it covered the first row. */
 position:fixed!important;top:0!important;left:0!important;right:0!important;
 z-index:90!important;
 background:#fff!important;box-shadow:none!important;
 /* Variety KEEPS its hairline over the open sheet - it is the line under the
    Menu head. Measured: 1px rgba(20,20,22,.12). */
 border-bottom:1px solid rgba(20,20,22,.12)!important}
.mobx.mobx.mobx > header:has(~ .mmenu.open) .brand{color:rgb(20,20,22)!important;font-size:0!important}
.mobx.mobx.mobx > header:has(~ .mmenu.open) .brand::after{
 content:"Menu"!important;
 font:400 17px/20px "Iowan Old Style",Georgia,"Times New Roman",Times,serif!important;
 letter-spacing:normal!important;color:rgb(20,20,22)!important}
.mobx.mobx.mobx > header:has(~ .mmenu.open) .burger,
.mobx.mobx.mobx > header:has(~ .mmenu.open) .bg{color:rgb(20,20,22)!important}
.mobx.mobx.mobx > header:has(~ .mmenu.open) .hdivider,
.mobx.mobx.mobx > header:has(~ .mmenu.open) .hx{display:none!important}
/* the bar inside the header carries its own white ground - the header going dark
   was not enough, the white block stayed */
.mobx.mobx.mobx > header:has(~ .mmenu.open) .nav,
.mobx.mobx.mobx > header:has(~ .mmenu.open) .navleft,
.mobx.mobx.mobx > header:has(~ .mmenu.open) .brand,
.mobx.mobx.mobx > header:has(~ .mmenu.open) .brand a,
.mobx.mobx.mobx > header:has(~ .mmenu.open) .ic{
 background:transparent!important;box-shadow:none!important;border-color:transparent!important}
/* 2026-09-18: this drew an EMPTY outlined square where the mark should be -
   the rule above strips .ic's background, and the mark IS a background image.
   Variety keeps its mark painted over the open sheet; so does this now. */
.mobx.mobx.mobx > header:has(~ .mmenu.open) .ic{
 color:transparent!important;border:0!important;
 background-color:transparent!important;
 background-image:var(--tp-mark)!important;
 background-repeat:no-repeat!important;background-position:center center!important;
 background-size:contain!important}
/* every link keeps its hairline, including the last one - the line above the
   Subscribe pill is what spaces it off the list the way the rows are spaced */
.mobx.mobx.mobx .mmenu.mmenu nav > a.cta{border-bottom:0!important}


/* ==========================================================================
   WHAT WE COVER — the seven categories are a rail (2026-09-15)
   Variety's SERVICES numbers: full bleed 0 -> 393, flex, snap x mandatory,
   gap 14, padding 14px 22px 18px, card flex 0 0 80%, snap centre, radius 16.
   Stacked, the seven rows were the longest block on the phone.
   Desktop is untouched - this whole sheet is inside max-width:899.
   ========================================================================== */
.mobx.mobx.mobx section.tpsay ul.tpsay-beats{
 display:flex!important;flex-wrap:nowrap!important;list-style:none!important;
 overflow-x:auto!important;-webkit-overflow-scrolling:touch!important;
 scroll-snap-type:x mandatory!important;scrollbar-width:none!important;
 gap:14px!important;padding:14px 22px 18px!important;margin:0 -22px!important;
 width:auto!important;max-width:none!important}
.mobx.mobx.mobx section.tpsay ul.tpsay-beats::-webkit-scrollbar{display:none!important}
.mobx.mobx.mobx section.tpsay ul.tpsay-beats > li{
 flex:0 0 80%!important;width:80%!important;max-width:80%!important;min-width:0!important;
 scroll-snap-align:center!important;
 display:flex!important;flex-direction:column!important;gap:6px!important;
 /* the tile is Variety's .scard, measured at 393:
      radius 18, bg #fff, border 1px rgba(20,20,22,.07),
      shadow rgba(20,20,22,.08) 0 10px 26px, padding 18 18 16 */
 background:#fff!important;border:1px solid rgba(20,20,22,.07)!important;
 border-radius:18px!important;box-shadow:0 10px 26px rgba(20,20,22,.08)!important;
 padding:18px 18px 16px!important;margin:0!important;
 border-top:1px solid rgba(20,20,22,.07)!important}
/* the title takes Variety's h3 "Growth & Production" at 393:
   serif 18/19.8, weight 600, tracking -0.3, rgb(20,20,22), title case */
.mobx.mobx.mobx section.tpsay ul.tpsay-beats > li > .k{
 font-family:"Iowan Old Style",Palatino,Georgia,Cambria,serif!important;
 font-size:18px!important;line-height:19.8px!important;font-weight:600!important;
 letter-spacing:-.3px!important;text-transform:none!important;
 color:rgb(20,20,22)!important;margin:4px 0 3px!important}
/* and the line under it takes Variety's li "Visibility & conversion systems":
   sans 13.5/22.275, weight 400, tracking normal, rgb(74,74,82) */
.mobx.mobx.mobx section.tpsay ul.tpsay-beats > li > .v{
 font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;
 font-size:13.5px!important;line-height:22.275px!important;font-weight:400!important;
 letter-spacing:normal!important;color:rgb(74,74,82)!important;margin:0!important}

/* the CATEGORIES sub-head comes off - the section's own grey label already
   says how many there are, so the word was said twice */
.mobx.mobx.mobx section.tpsay .tpsay-bhd{display:none!important}

/* and the lead comes off on the phone - the head plus the rail carries it */
.mobx.mobx.mobx section.tpsay .tpsay-body > p:first-of-type{display:none!important}
/* with the lead and the sub-head gone, the blocks that carried them keep their
   own top air - 67 of it between the label and the first card. The rail's own
   14 of padding IS the gap, so everything above it goes to zero. */
.mobx.mobx.mobx section.tpsay .tpsay-body{padding-top:0!important}
.mobx.mobx.mobx section.tpsay .tpsay-right{margin-top:0!important;padding-top:0!important}
.mobx.mobx.mobx section.tpsay ul.tpsay-beats{margin-top:0!important}
/* the head's own 14 and the rail's own 14 of padding stacked to 28 between the
   label and the first card. On a railed section the rail's padding IS the gap. */
.mobx.mobx.mobx section.tpsay .tpsec-hd.tpsec-hd.tpsec-hd{
 margin-bottom:0!important;padding-bottom:0!important}

}

/* ==========================================================================
   These rules were appended after the file's own @media block had already
   closed, so they were GLOBAL and were reaching the desktop - which is why the
   desktop feature cards were taking the phone's 23/25.76 headline and 14/21
   brief. Re-gated here. Nothing below may ever leave this block.
   ========================================================================== */
@media (max-width:760px){
/* head on the phone matches the desktop: orange eyebrow, grey label, rule, article */
/* the h2 keeps its box because the orange kicker is its ::before - only its
   own words go, in JS, so THIS WEEK still paints. See tp-featword. */

/* SPECIAL EDITION off on the phone too - one orange kicker per section */
.mobx.mobx.mobx > section.cover.cover .tpf-col > .eyebrow{display:none!important}

/* THE FEATURE card on the phone — VP's .wcard at 393: radius 16, no border,
   shadow rgba(20,20,22,.08) 0 10px 26px. Picture 190, brief three lines. */
.mobx.mobx.mobx > section.cover.cover .tpf-row.tpf-card{
 display:block!important;background:#fff!important;border:0!important;
 border-radius:16px!important;overflow:hidden!important;
 box-shadow:0 10px 26px rgba(20,20,22,.08)!important;padding:0!important;margin:0!important}
.mobx.mobx.mobx > section.cover.cover .tpf-card > .tpf-col{
 display:block!important;width:100%!important;padding:18px 20px 20px!important;margin:0!important}
.mobx.mobx.mobx > section.cover.cover .tpf-card > .tpf-col > h2{
 height:48px!important;overflow:hidden!important;display:-webkit-box!important;
 -webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;margin:0 0 12px!important}
.mobx.mobx.mobx > section.cover.cover .tpf-card > .tpf-col > .dek{
 height:69px!important;overflow:hidden!important;display:-webkit-box!important;
 -webkit-line-clamp:3!important;-webkit-box-orient:vertical!important;margin:0 0 14px!important}

/* the card's own fixes, measured at 393:
   - the picture sat 32 below the card's top edge: .cover-img carries a
     margin:32px 0 0 from the stacked-feature rule, which has to go inside a card
   - the brief reserved 69 while its line box is 21, so 3 lines are 63 and 6px of
     a fourth line showed under the ellipsis
   - the headline reserved 48 while its line box is 26.68, so 2 lines are 53.36
     and the second line's descenders were cut */
.mobx.mobx.mobx > section.cover.cover .tpf-card > .cover-img{
 margin:0!important;padding:0!important}
.mobx.mobx.mobx > section.cover.cover .tpf-card > .tpf-col > h2{
 line-height:24px!important;height:48px!important}
.mobx.mobx.mobx > section.cover.cover .tpf-card > .tpf-col > .dek{
 line-height:21px!important;height:63px!important}

/* THE FEATURE RAIL on the phone - VP's .car: gap 14, bleed to the gutter, 80% cards */
.mobx.mobx.mobx > section.cover.cover .tpf-rail{
 display:flex!important;flex-wrap:nowrap!important;
 overflow-x:auto!important;scroll-snap-type:x mandatory!important;scrollbar-width:none!important;
 gap:14px!important;padding:6px 22px 18px!important;margin:0 -22px!important;width:auto!important}
.mobx.mobx.mobx > section.cover.cover .tpf-rail::-webkit-scrollbar{display:none!important}
.mobx.mobx.mobx > section.cover.cover .tpf-rail > .tpf-card{
 flex:0 0 80%!important;width:80%!important;max-width:80%!important;min-width:0!important;
 scroll-snap-align:center!important;text-decoration:none!important;color:inherit!important}

/* same on the phone: every card in the rail is one card, the first included */
.mobx.mobx.mobx > section.cover.cover .tpf-rail > .tpf-card.tpf-card{
 display:block!important;background:#fff!important;border:0!important;
 border-radius:16px!important;overflow:hidden!important;
 box-shadow:0 10px 26px rgba(20,20,22,.08)!important;padding:0!important;margin:0!important;
 text-decoration:none!important;color:inherit!important}
.mobx.mobx.mobx > section.cover.cover .tpf-rail > .tpf-card.tpf-card > .tpf-col{
 display:block!important;width:100%!important;padding:16px 18px 18px!important;margin:0!important}
.mobx.mobx.mobx > section.cover.cover .tpf-rail > .tpf-card.tpf-card > .tpf-col > h2{
 font:600 18px/22px "Iowan Old Style",Georgia,serif!important;letter-spacing:-.3px!important;
 color:#141416!important;height:44px!important;margin:0 0 10px!important;overflow:hidden!important;
 display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important}
.mobx.mobx.mobx > section.cover.cover .tpf-rail > .tpf-card.tpf-card > .tpf-col > .dek{
 font:400 14px/21px "Iowan Old Style",Georgia,serif!important;color:#4a4a52!important;
 height:63px!important;margin:0 0 12px!important;overflow:hidden!important;
 display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical!important}
.mobx.mobx.mobx > section.cover.cover .tpf-rail > .tpf-card.tpf-card > .tpf-col > .byline{
 font:700 10px/1.4 var(--tp-sans)!important;letter-spacing:2px!important;text-transform:uppercase!important;
 color:#8a857c!important;margin:0 0 12px!important}
.mobx.mobx.mobx > section.cover.cover .tpf-rail > .tpf-card.tpf-card > .tpf-col > .readmore{
 display:inline-block!important;font:700 10px/1 var(--tp-sans)!important;letter-spacing:2px!important;
 text-transform:uppercase!important;color:#141416!important;
 border-bottom:1px solid #c4ab67!important;padding-bottom:4px!important;margin:6px 0 0!important}

/* Variety's mobile hint is 11/18.15, weight 400, tracking 1, rgb(154,148,136),
   sitting 6 under the title. Ours was running an 19.8 line box. */
.mobx.mobx.mobx .tpsec-hd .tplab.tplab.tplab,
.mobx.mobx.mobx .tpmore-hd .tplab.tplab.tplab,
.mobx.mobx.mobx .tpg-hd .tplab.tplab.tplab{
 font-size:11px!important;line-height:18.15px!important;font-weight:400!important;
 letter-spacing:1px!important;color:rgb(154,148,136)!important;
 text-transform:uppercase!important;margin:6px -2px 0 0!important}

/* ---- VARIETY'S PHONE FRAME, re-measured at 393 and applied here ------------
   header       56 tall, gutter 22   (ours was running an 18 gutter)
   banner       317 tall             (ours was 215.86)
   section      padding 25 / 0 / 24  (already matched)
   head, by INK, not by box:
     section top -> eyebrow cap   28
     eyebrow base -> title cap     8.14   (ours was 5.99)
     title base  -> hint cap       8.3    (ours was 9.3)
     hint base   -> first card    17.14   (already matched at 17.16)
   fonts: eyebrow 11/18.15 w700 ls2.5, title 23/25.3 w600 ls-0.3,
          hint 11/18.15 w400 ls1  (already matched)                            */
.mobx.mobx.mobx > header{padding:0 22px!important}
.mobx.mobx.mobx div.mast.mast{
 min-height:317px!important;box-sizing:border-box!important}
/* the eyebrow sits on the h2 as its ::before, so the eyebrow-to-title gap is
   that pseudo-element's own bottom margin: 8.14, Variety's. */
.mobx.mobx.mobx section .tpsec-hd h2::before,
.mobx.mobx.mobx section .tpmore-hd h2::before,
.mobx.mobx.mobx section .tpg-hd h2::before{
 margin:0 0 8.14px!important;line-height:18.15px!important}
/* and the hint sits 8.3 under the title's baseline */
/* the title -> hint gap is solved by ink in mobile.js (vpHeadLines), not set here */

/* the banner is Variety's 317 now, and its words are short, so they centre in the
   band instead of sitting at the top with 270 of air under them. */
.mobx.mobx.mobx div.mast.mast.mast{justify-content:center!important}

/* (the banner layout experiment was reverted - the masthead keeps its own
   centred layout; only its HEIGHT follows Variety) */

/* ---- THE BANNER, sized off Variety at 393 ---------------------------------
   Band height is already Variety's 317 on both, verified at 393/390/402/430.
   What was short is the CONTENT inside it: Variety's spans 166.66 with its top
   72.8 from the band's edge; ours spanned 127.36 from 94.11. The wordmark was
   running 300 wide inside a 349 measure, so it goes to the full measure, and
   the gaps take Variety's own numbers:
      eyebrow base -> title     12.7
      title  base  -> rule      15.7
      rule   base  -> detail    12.8
   (Variety carries five lines to our three, so the spans cannot be identical
   without inventing a line - the SIZES and the GAPS are what match.)          */

.mobx.mobx.mobx div.mast.mast.mast .mastrule{margin:15.7px 0 0!important}
.mobx.mobx.mobx div.mast.mast.mast .sched{margin:12.8px 0 0!important}

/* the feature card's type on the phone is the same card's type: Variety runs
   16/17.6 w600 -0.3 over 12/19.8 w400 at BOTH widths, body padded 15. */
.mobx.mobx.mobx > section.cover.cover .tpf-rail > .tpf-card.tpf-card > .tpf-col{
 padding:14px 15px 15px!important}
.mobx.mobx.mobx > section.cover.cover .tpf-rail > .tpf-card.tpf-card > .tpf-col > h2{
 font:600 16px/17.6px "Iowan Old Style",Georgia,serif!important;letter-spacing:-.3px!important;
 color:#141416!important;height:35.2px!important;margin:0!important}
.mobx.mobx.mobx > section.cover.cover .tpf-rail > .tpf-card.tpf-card > .tpf-col > .dek{
 font:400 12px/19.8px var(--tp-sans)!important;letter-spacing:normal!important;
 color:rgb(74,74,82)!important;height:39.6px!important;margin:5.99px 0 0!important;
 -webkit-line-clamp:2!important}
.mobx.mobx.mobx > section.cover.cover .tpf-rail > .tpf-card.tpf-card > .tpf-col > .byline{
 margin:12px 0 0!important}
.mobx.mobx.mobx > section.cover.cover .tpf-rail > .tpf-card.tpf-card > .tpf-col > .readmore{
 margin:12px 0 0!important}
}

@media (max-width:760px){
/* ==========================================================================
   tpq-mobile-parity — 2026-09-17. Every number measured on varietypartners.com
   at 393 x 852 / dpr 3. The footer is a child of BODY, not of .mobx, on both
   sites — a `.mobx footer` selector matches nothing, which is how the first
   attempt at this silently did nothing.
   ========================================================================== */

/* 1 · THE HEADER MARK. Variety's phone header is mark + wordmark: .ic is 28x28
      at x22 and the block reads 145.1 wide. The Position hid .ic and showed the
      wordmark alone at 87. */
.mobx.mobx.mobx > header .lg .ic,
.mobx.mobx.mobx > header .brand .ic,
.mobx.mobx.mobx > header .logo .ic{
 display:inline-block!important;
 width:28px!important;height:28px!important;min-width:28px!important;flex:0 0 28px!important;
 border-radius:7px!important;margin:0 11px 0 0!important;padding:0!important;
 font-size:0!important;line-height:0!important;color:transparent!important;
 text-indent:-9999px!important;overflow:hidden!important;
 background-color:transparent!important;
 background-image:url("data:image/png;base64,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")!important;
 background-repeat:no-repeat!important;background-position:center center!important;
 background-size:contain!important}
.mobx.mobx.mobx > header .lg,
.mobx.mobx.mobx > header .brand,
.mobx.mobx.mobx > header .logo{display:flex!important;align-items:center!important}

/* 2 · THE FOOTER — the DESKTOP footer, at Variety's height and positions.
      Desktop (113.3), measured:
        row 1  [mark] The Position ................ mail | X | arrow
        row 2  A VARIETY PARTNERS PUBLICATION ........... SUBSCRIBE
        row 2 type 700 10 / 10, ls 2.4, rgb(200,196,189)
      Variety's phone frame, measured: band 124.92, .tpf-in 28.8 / 22 / 28.05,
      row 1 top 29.8 h 28, row 2 margin-top 29.09 h 10.
      Only those three strings. No nav, no BACK TO TOP words, no email field.
      The footer is a child of BODY, not .mobx - a `.mobx footer` selector
      matches nothing here. */
body footer.tpfoot .tpf-in.tpf-in{
 /* EVERY part is placed against this box. The rows were fought over by three
    older rule sets and a solver, and flex kept losing - the mark came out
    centred and SUBSCRIBE dropped to a third line while the computed styles
    read correctly. Absolute placement cannot be argued with.
    Variety's phone frame: band 124.92, gutter 22, row 1 top 29.8 h 28,
    row 2 ink at 86.9. */
 position:relative!important;display:block!important;
 height:80px!important;min-height:0!important;max-height:none!important;
 padding:0!important;margin:0!important}
body footer.tpfoot .tpf-row1.tpf-row1,
body footer.tpfoot .tpf-row2.tpf-row2{
 display:block!important;position:static!important;height:0!important;
 margin:0!important;padding:0!important;overflow:visible!important}
body footer.tpfoot .tpf-mark.tpf-mark{
 position:absolute!important;left:22px!important;top:13.5px!important;
 display:flex!important;align-items:center!important;height:28px!important;
 width:auto!important;margin:0!important;padding:0!important;
 font-size:17px!important;letter-spacing:normal!important;white-space:nowrap!important;
 /* the lockup gap is 0 here: Variety's wordmark ink starts at 58 and The
    Position's T carries its own side bearing. */
 gap:0!important}
body footer.tpfoot .tpf-mark.tpf-mark .tpf-ic{
 /* Variety's lockup: 28 x 28 at radius 7, 8 to the wordmark, block 145.06 */
 width:28px!important;height:28px!important;flex:0 0 28px!important;border-radius:7px!important;
 margin-right:11px!important}
body footer.tpfoot .tpf-soc.tpf-soc{
 /* VARIETY'S OWN BLOCK, copied from vpfooter.css - not rebuilt:
      .tpf-soc  display:flex, align-items:center, gap 11.54, margin-right -5.24
      mail svg 19.82 · second mark svg 19.95 · arrow svg 24.8
      arrow  margin-left -1.98, margin-right -5.33, top -0.75
      hairline  1 x 15  rgba(244,243,241,.22), top 50%, translateY(-50%),
                left calc(100% + 6.5px) after the first, + 6.05px after the second
    The arrow now lives INSIDE .tpf-soc in the markup, the way Variety's does. */
 position:absolute!important;right:27.34px!important;top:16.14px!important;left:auto!important;
 display:flex!important;align-items:center!important;
 gap:11.54px!important;margin:0 -5.24px 0 0!important;padding:0!important;
 width:auto!important;max-width:none!important;height:24.8px!important}
body footer.tpfoot .tpf-soc.tpf-soc .tpf-ico{
 position:relative!important;display:flex!important;align-items:center!important;
 justify-content:center!important;margin:0!important;padding:0!important;flex:0 0 auto!important}
/* the icon BOX was pinning the svg to 19 wide - the svg fills its box */
body footer.tpfoot .tpf-soc.tpf-soc .tpf-ico.tpf-ico:first-of-type{
 width:19.82px!important;height:19.82px!important;min-width:0!important;max-width:none!important}
body footer.tpfoot .tpf-soc.tpf-soc .tpf-ico.tpf-ico:nth-of-type(2){
 width:19.43px!important;height:19.43px!important;min-width:0!important;max-width:none!important}
body footer.tpfoot .tpf-soc.tpf-soc .tpf-ico.tpf-ico.tpf-ico:first-of-type svg{
 display:block!important;width:19.82px!important;height:19.82px!important;max-width:none!important}
body footer.tpfoot .tpf-soc.tpf-soc .tpf-ico.tpf-ico.tpf-ico:nth-of-type(2) svg{
 /* the X glyph is wider than it is tall; 20.59 paints it 16.00 across, the
    same ink width as Variety's second mark. */
 display:block!important;width:19.43px!important;height:19.43px!important;max-width:none!important}
body footer.tpfoot .tpf-soc.tpf-soc .tpf-top{
 position:relative!important;display:flex!important;align-items:center!important;
 top:-0.75px!important;right:auto!important;left:auto!important;
 margin:0 -5.33px 0 -1.98px!important;padding:0!important;border:0!important;
 width:auto!important;height:auto!important;font-size:0!important;
 color:rgb(200,196,189)!important;text-decoration:none!important}
body footer.tpfoot .tpf-soc.tpf-soc .tpf-top svg.vpf-up{
 /* Variety paints its arrow 15.25 tall with a 1.75 shaft; the same SVG here
    painted 15.75 with a 2.25 shaft, so the box comes to 24.01 and the stroke
    to 1.53 in the markup. */
 display:block!important;width:24.8px!important;height:24.8px!important}
body footer.tpfoot .tpf-soc.tpf-soc .tpf-top::after{content:none!important}
body footer.tpfoot .tpf-soc.tpf-soc .tpf-sep{display:none!important}
body footer.tpfoot .tpf-soc.tpf-soc .tpf-ico:first-of-type::after,
body footer.tpfoot .tpf-soc.tpf-soc .tpf-ico:nth-of-type(2)::after{
 content:""!important;display:block!important;position:absolute!important;top:50%!important;
 transform:translateY(-50%)!important;width:1px!important;height:15px!important;
 background:rgba(244,243,241,.22)!important;pointer-events:none!important}
body footer.tpfoot .tpf-soc.tpf-soc .tpf-ico:first-of-type::after{left:calc(100% + 6.5px)!important}
/* 2026-09-18: measured on the painted ink at dpr 4, the five runs across the
   row are identical in width to Variety (17.25 / 1 / 16 / 1 / 14.25) but the
   gaps read 7.5 / 7.75 / 6.25 / 7.25 against Variety's 7.5 / 8 / 8 / 7.25 -
   the X glyph's ink is not centred inside its own viewBox the way Instagram's
   is. The arrow is the right anchor and does not move: the X goes 0.5 left,
   Instagram and its hairline go 2 left, and the X's own hairline is pushed
   1.75 back so it stays put. */
body footer.tpfoot .tpf-soc.tpf-soc .tpf-ico:first-of-type{position:relative!important;left:-2px!important}
body footer.tpfoot .tpf-soc.tpf-soc .tpf-ico:nth-of-type(2){position:relative!important;left:-0.25px!important}
body footer.tpfoot .tpf-soc.tpf-soc .tpf-ico:nth-of-type(2)::after{left:calc(100% + 6.30px)!important}
body footer.tpfoot .tpf-pub.tpf-pub{
 /* Variety: the O starts 0.5 inside its box, so the line is pulled -0.5 */
 position:absolute!important;left:21.5px!important;top:55.5px!important;right:auto!important;
 display:block!important;width:auto!important;margin:0!important;padding:0!important;
 font:700 10px/10px -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif!important;
 letter-spacing:2.4px!important;text-transform:uppercase!important;
 color:rgb(200,196,189)!important;white-space:nowrap!important}
body footer.tpfoot .tpf-sub.tpf-sub{
 /* Variety: 2.4 of tracking after the last letter, so the box ends 3 past the
    gutter and the ink lands on it */
 position:absolute!important;right:19px!important;top:55.5px!important;left:auto!important;
 display:flex!important;align-items:center!important;justify-content:flex-end!important;
 width:auto!important;max-width:none!important;margin:0!important;padding:0!important;
 border:0!important;background:none!important}
body footer.tpfoot .tpf-sub.tpf-sub input{display:none!important}
body footer.tpfoot .tpf-sub.tpf-sub button{
 background:none!important;border:0!important;padding:0!important;margin:0!important;
 height:10px!important;min-height:0!important;border-radius:0!important;
 font:700 10px/10px -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif!important;
 letter-spacing:2.4px!important;text-transform:uppercase!important;
 color:rgb(200,196,189)!important;white-space:nowrap!important}
body footer.tpfoot .tpf-mid.tpf-mid{display:none!important}
/* tpq-mobile-parity */
}

@media (max-width:760px){
/* 2026-09-18: the gap above the menu's CTA pill read 26 against Variety's 22,
   which is why the panel measured 445.6 where Variety's is 441.6. */
.mobx.mobx.mobx .mmenu.mmenu nav > a.cta{margin-top:22px!important}
}

@media (max-width:760px){
/* ==========================================================================
   tpq-puzzle-card — 2026-09-18. THE PHONE CARD IS THE DESKTOP CARD, SCALED.
   Measured on the desktop card at 1512:
     card   338.5 x 240.5   no background, no border, no radius, no shadow, no padding
     tile   338.5 x 150     rgb(230,227,222), radius 4, mark 104 x 104 centred
     title  20 / 24 serif 600   16.0 below the tile
     desc   14 / 21 sans        6.0 below the title
     PLAY   700 9.5 / 9.5, ls 2.2, rgb(139,135,129), 14 above
   The phone card is 66% of 393 = 259.4 wide, so the scale is 259.4 / 338.5 =
   0.766: tile 115, mark 80. The phone was running a bordered white box with a
   shadow and the mark hung under the words at 70 - a different card entirely.
   This is tighter AND the mark is bigger: 267.8 -> ~202, mark 70 -> 80.
   ========================================================================== */
.mobx.mobx.mobx section.tpgames.tpgames .tpg-grid a.tpg-item.tpg-item{
 /* Variety's own phone card, measured on its rail at 393:
      white, radius 18, 1px rgba(20,20,22,.07), padding 18 / 18 / 16, gap 14 */
 background:#fff!important;border:1px solid rgba(20,20,22,.07)!important;
 border-radius:18px!important;box-shadow:0 10px 26px rgba(20,20,22,.08)!important;
 padding:18px 18px 16px!important;align-self:flex-start!important;
 display:flex!important;flex-direction:column!important}
.mobx.mobx.mobx section.tpgames.tpgames .tpg-grid a.tpg-item.tpg-item .tpg-art{
 /* the desktop tile, at the desktop's own ratio. Desktop 338.5 x 150 = 2.256,
    so 243.2 of inner width gives 107.8 - it was reading wide at 279.2 x 115
    (2.43) because the tile ran the full card width with no card around it. */
 order:-1!important;
 background:rgb(230,227,222)!important;border-radius:4px!important;
 width:100%!important;height:107.8px!important;max-height:107.8px!important;
 padding:0!important;margin:0!important;flex:0 0 auto!important;
 display:flex!important;align-items:center!important;justify-content:center!important}
.mobx.mobx.mobx section.tpgames.tpgames .tpg-grid a.tpg-item.tpg-item .tpg-art svg{
 /* desktop mark 104 on a 338.5 tile = 0.307 of the tile's width */
 width:75px!important;height:75px!important;max-width:75px!important;max-height:75px!important}
.mobx.mobx.mobx section.tpgames.tpgames .tpg-grid a.tpg-item.tpg-item .tpg-n{margin:16px 0 0!important}
.mobx.mobx.mobx section.tpgames.tpgames .tpg-grid a.tpg-item.tpg-item .tpg-d{margin:6px 0 0!important}
.mobx.mobx.mobx section.tpgames.tpgames .tpg-grid a.tpg-item.tpg-item::after{margin:14px 0 0!important}
/* tpq-puzzle-card */
}

@media (max-width:760px){
/* ==========================================================================
   tpq-canvas — 2026-09-18. THE SAME FIX VARIETY GOT (THE-RULES R0d).
   1 · The grey under the footer is the CANVAS, not the footer. html/body were
       #f4f3f1, so the strip a phone paints while it rubber-bands, and behind
       the floating toolbar, read as a grey margin under the black band.
       Variety's locked value is its own footer colour; The Position's footer is
       rgb(25,23,18) = #191712, so that is the canvas.
   2 · The band was GROWING on a real phone. The old stack rule ADDED
       env(safe-area-inset-bottom) to the footer's padding - about 34px of home
       indicator - so a band that measures 124.91 in a browser painted ~159 on
       an iPhone. Variety SUBTRACTS the inset and lets the canvas paint that
       strip, which is why its band never changes height. Same here now.
   ========================================================================== */
/* MEASURED ON THE LIVE VARIETY SITE, 2026-09-18:
     Variety   html/body background = rgb(25, 23, 18)   (its footer's colour)
     Position  html/body background = rgb(255,255,255)  <- the white strip
   Nothing sits below either footer (document ends 0.2 after it), so the band an
   iPhone paints under the footer, and behind the Safari toolbar, IS the canvas.
   Variety's is dark, which is why its footer runs to the bottom edge of the
   screen; The Position's was white, which is the strip in the photograph.
   The `env(safe-area-inset-bottom)` strip I tried instead is 0 high whenever the
   toolbar is showing, so it painted nothing. This is Variety's own rule, and the
   dark pull-down at the top is what Variety does too. */
html,body{overscroll-behavior-y:none!important}
/* 2026-09-22, from the phone tests: top strip and bottom band both followed the CANVAS when html and body were the same colour. Split them: html (the canvas) dark for the band under the footer; body white for what Safari samples at the top. */
html{background-color:#191712!important;background-image:none!important}
body{background-color:#191712!important;background-image:none!important}
/* 2026-10-18 (same as Variety): no safe-area inset on the footer - it made the band longer on an iPhone and it jumped as
   the toolbar came and went. The footer is one height everywhere; the dark canvas paints the strip under it. */
body footer.tpfoot{padding-bottom:0!important}

/* tpq-canvas */
}

@media (max-width:760px){
/* the Netlify honeypot must never paint - #subwrap's own input rules would
   otherwise give it a box */
#subwrap form p[hidden],#subwrap form input[name="bot-field"]{display:none!important}
}

/* tpq-home-four */
/* 2026-09-18: the home shelf carries FOUR puzzles, the same four the desktop
   shows. The phone was painting all eight because the card block above sets
   display:flex on every .tpg-item, which beat the site rule that hides the
   rest. Scoped to the home shelf so the Puzzles page keeps its eight. */
@media (max-width:760px){
 .mobx.mobx.mobx section.tpgames.tpgames[data-shelf="home"] .tpg-grid a.tpg-item.tpg-item:nth-child(n+5){
  display:none!important}
}

/* tpq-banner-variety-phone */
/* 2026-09-18: the section banners on the phone were running the DESKTOP type -
   a 54px h1 where Variety sets 28 - so archive came to 285.80, featured to
   344.05 and puzzles to 313.92 where every Variety page is exactly 317.
   MEASURED on Variety at 393x852, dpr 3, on work / our-brands / contact /
   onboard - all four identical:
     band      317 high, padding 0 22px, text left
     eyebrow   top 70.80   700 12px/18px    ls 1.9     #c4ab67 uppercase
     h1        top 101.52  600 28px/31.92px ls -0.21
     sub       top 141.42  400 17px/23.29px ls normal
     rule      top 180.44  48 x 3           #c4ab67
     lead      top 196.20  400 15px/23.25px
   Copied run for run. Only the ink changes: Variety's banner is a photo with
   white type, The Position's is cream, so it keeps its own dark ink.
   The older phone rules carry .pmast.pmast.pmast with !important, so every
   selector here is written heavier than that on purpose. */
@media (max-width:760px){
 html body .mobx.mobx.mobx > div.pmast.pmast.pmast.pmast.vpban,
 html body .mobx.mobx.mobx > section.tpgh.tpgh.tpgh.tpgh.vpban{
  position:relative!important;box-sizing:border-box!important;
  height:317px!important;min-height:317px!important;max-height:317px!important;
  flex:0 0 317px!important;
  padding:0 22px!important;margin:0!important;
  display:block!important;overflow:hidden!important;text-align:left!important}
 /* the puzzles page wraps its runs in .tpgh-say - it holds no ink of its own */
 html body .mobx.mobx.mobx > section.tpgh.tpgh.tpgh.vpban .tpgh-say.tpgh-say.tpgh-say,
 html body .mobx.mobx.mobx > section.tpgh.tpgh.tpgh.vpban .tpgh-in.tpgh-in.tpgh-in{
  /* .tpgh-in is position:relative, so it - not the band - was the containing
     block for the absolute runs and left:22 landed them at 44. */
  position:static!important;display:block!important;height:0!important;
  margin:0!important;padding:0!important;overflow:visible!important}
 html body .mobx.mobx.mobx > div.pmast.pmast.pmast.vpban .eyebrow.eyebrow.eyebrow,
 html body .mobx.mobx.mobx > section.tpgh.tpgh.tpgh.vpban .tpgh-eyebrow.tpgh-eyebrow.tpgh-eyebrow{
  position:absolute!important;left:22px!important;right:22px!important;top:70.80px!important;
  display:block!important;margin:0!important;padding:0!important;
  font:700 12px/18px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;
  letter-spacing:1.9px!important;text-transform:uppercase!important;
  color:#876c22!important;white-space:nowrap!important;overflow:hidden!important;
  text-overflow:ellipsis!important}
 html body .mobx.mobx.mobx > div.pmast.pmast.pmast.vpban h1.h1.h1,
 html body .mobx.mobx.mobx > div.pmast.pmast.pmast.vpban h1,
 html body .mobx.mobx.mobx > section.tpgh.tpgh.tpgh.vpban h1.h1.h1,
 html body .mobx.mobx.mobx > section.tpgh.tpgh.tpgh.vpban h1{
  position:absolute!important;left:22px!important;right:22px!important;top:101.52px!important;
  margin:0!important;padding:0!important;
  font:600 28px/31.92px "Iowan Old Style",Palatino,Georgia,Cambria,serif!important;
  letter-spacing:-0.21px!important;color:#141416!important;text-transform:none!important}
 html body .mobx.mobx.mobx > div.pmast.pmast.pmast.vpban .pm-sub.pm-sub.pm-sub,
 html body .mobx.mobx.mobx > section.tpgh.tpgh.tpgh.vpban .pm-sub.pm-sub.pm-sub{
  position:absolute!important;left:22px!important;right:22px!important;top:141.42px!important;
  display:block!important;margin:0!important;padding:0!important;
  font:400 17px/23.29px "Iowan Old Style",Palatino,Georgia,Cambria,serif!important;
  letter-spacing:normal!important;color:#4a4a52!important}
 html body .mobx.mobx.mobx > div.pmast.pmast.pmast.vpban .pm-rule.pm-rule.pm-rule,
 html body .mobx.mobx.mobx > section.tpgh.tpgh.tpgh.vpban .pm-rule.pm-rule.pm-rule{
  position:absolute!important;left:22px!important;right:auto!important;top:180.44px!important;
  width:48px!important;height:3px!important;margin:0!important;
  background:#c4ab67!important;border:0!important;border-radius:0!important}
 html body .mobx.mobx.mobx > div.pmast.pmast.pmast.vpban > p,
 html body .mobx.mobx.mobx > section.tpgh.tpgh.tpgh.vpban > p,
 html body .mobx.mobx.mobx > section.tpgh.tpgh.tpgh.vpban .tpgh-say > p{
  position:absolute!important;left:22px!important;right:22px!important;top:196.20px!important;
  margin:0!important;padding:0!important;
  font:400 15px/23.25px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;
  letter-spacing:normal!important;color:#4a4a52!important;
  /* 317 - 196.20 = 120.80 of room: five lines at 23.25 */
  max-height:116.25px!important;overflow:hidden!important}
}

/* tpq-archive-phone */
/* 2026-09-18: below the banner the archive page ran edge to edge - the head,
   the search box, the chips, every row and the Show-all button all started at
   x0 and finished at 393, where every other section on the phone sits on the
   22 gutter. MEASURED on the home page's own shelf, which is the rule the
   whole phone follows:
     section   padding 23.425px 0 24px, border-top 1px rgb(20,20,22)
     h2        x22  top 24.42  600 23px/25.3px  ls -0.3   #141416  Iowan
     label     x22  top 80.72  400 11px/18.15px ls 1      rgb(154,148,136) caps
   The hairlines between rows stay full width, the way the home rails bleed:
   the gutter is carried by the blocks inside, not by the section. */
@media (max-width:760px){
 html body .mobx.mobx.mobx > section.pbody.arcpage.arcpage{
  /* the section was a flex column pinned to the fold, which is what forced the
     list to shrink into a part-row. On the phone it runs to its content. */
  display:block!important;height:auto!important;min-height:0!important;max-height:none!important;
  padding:23.425px 0 24px!important;
  border-top:1px solid rgb(20,20,22)!important}
 html body .mobx.mobx.mobx > section.pbody.arcpage .arc-hd.arc-hd{
  /* the closing rule was landing on the baseline of "38 stories" - the head
     carries the clearance now */
  display:block!important;padding:0 22px 18px!important;margin:0!important;height:auto!important}
 html body .mobx.mobx.mobx > section.pbody.arcpage .arc-hd .arc-eyebrow.arc-eyebrow{
  display:block!important;position:static!important;float:none!important;
  margin:0!important;padding:0!important;width:auto!important;
  font:700 11px/18.15px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;
  letter-spacing:1px!important;text-transform:uppercase!important;color:#876c22!important}
 html body .mobx.mobx.mobx > section.pbody.arcpage .arc-hd h2{
  display:block!important;margin:6.27px 0 0!important;padding:0!important;
  font:600 23px/25.3px "Iowan Old Style",Palatino,Georgia,Cambria,serif!important;
  letter-spacing:-0.3px!important;color:#141416!important}
 /* the count was floated right on the eyebrow's line - that is the DESKTOP
    head. On the phone the home page stacks its label under the title. */
 html body .mobx.mobx.mobx > section.pbody.arcpage .arc-hd .acount.acount{
  display:block!important;position:static!important;float:none!important;
  width:auto!important;text-align:left!important;
  margin:13.15px 0 0!important;padding:0!important;
  font:400 11px/18.15px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;
  letter-spacing:1px!important;text-transform:uppercase!important;color:rgb(154,148,136)!important}
 html body .mobx.mobx.mobx > section.pbody.arcpage .searchbox.searchbox{
  margin-left:22px!important;margin-right:22px!important;width:auto!important;
  max-width:none!important;padding-left:0!important;padding-right:0!important}
 /* the chips wrapped to two lines and ate 40px of the list's room. Every other
    strip on the phone scrolls sideways instead - so do these. */
 html body .mobx.mobx.mobx > section.pbody.arcpage .achips.achips{
  display:flex!important;flex-wrap:nowrap!important;
  overflow-x:auto!important;overflow-y:hidden!important;
  -webkit-overflow-scrolling:touch!important;scrollbar-width:none!important;
  margin:0!important;padding:0 22px!important;width:auto!important;max-width:none!important}
 html body .mobx.mobx.mobx > section.pbody.arcpage .achips.achips::-webkit-scrollbar{display:none!important}
 html body .mobx.mobx.mobx > section.pbody.arcpage .achips .chip{flex:0 0 auto!important}
 html body .mobx.mobx.mobx > section.pbody.arcpage .clist .crow.crow{
  padding-left:22px!important;padding-right:22px!important}
 /* the row already carried 20 of its own - the two were adding up to 42 */
 html body .mobx.mobx.mobx > section.pbody.arcpage .clist .crow .ct,
 html body .mobx.mobx.mobx > section.pbody.arcpage .clist .crow .cd{
  padding-left:0!important;padding-right:0!important;margin-left:0!important;margin-right:0!important}
 
}
/* the list is no longer cut by a flex shrink: it carries whole rows */
@media (max-width:760px){
 html body .mobx.mobx.mobx > section.pbody.arcpage .clist.clist{
  flex:0 0 auto!important;max-height:none!important;overflow:visible!important}
}
/* .awrap is pinned to calc(var(--band) - 94px) and is the real cage - the
   section only looked pinned because its one child was. On the phone both run
   to their content. */
@media (max-width:760px){
 html body .mobx.mobx.mobx > section.pbody.arcpage.arcpage > .awrap{
  display:block!important;height:auto!important;max-height:none!important;min-height:0!important}
 html body .mobx.mobx.mobx > section.pbody.arcpage.arcpage > .awrap > .clist{
  flex:0 0 auto!important;max-height:none!important;overflow:visible!important}
 
 html body .mobx.mobx.mobx > section.pbody.arcpage.arcpage{overflow:visible!important}
}
@media (max-width:760px){
 /* the date sat at 22 while the title sat at 42, past the row's dot - one
    column now, the way the desktop row reads */
 html body .mobx.mobx.mobx > section.pbody.arcpage .clist .crow .cd{
  padding-left:20px!important}
 /* Show all is forced to display:block here, so the script's inline
    display:none could not hide it once the list was open */
 
}
/* Close list: the desktop keeps it in the flow, right-aligned, one pill under
   the last row - 20 above it and 47 of air before the footer. The phone had 14
   above and only 24 below, so it sat on the footer. MEASURED on the desktop at
   1512: row margin-top 20, button 141.6 x 40, padding 12/22/12/18, 12.5px. */
@media (max-width:760px){
 html body .mobx.mobx.mobx > section.pbody.arcpage.arcpage.open{
  padding-bottom:47px!important}
 /* the row is shown by its own .on class - forcing display:flex here made
    Close list sit under Show all while the list was still collapsed */
 
 
 
}

/* tpq-archive-phone-2 */
/* 2026-09-18, scaled from the desktop at 1512, which reads:
     head    padding-bottom 24, margin-bottom 26   (its ::after is the grey rule)
     search  height 40, margin-bottom 24
     chips   padding-bottom 10, margin-bottom 24
     row     padding 13px, one line
     Show all  a PILL on the RIGHT: 177.5 x 41, padding 13/28, radius 99, 13.5px
   On the phone the search box was sitting flush on the head's rule (both at
   y122.4) and the chips flush on the list's rule (both at y210.4) - no air at
   all, which is what read as the two of them being cut by the grey lines. */
@media (max-width:760px){
 html body .mobx.mobx.mobx > section.pbody.arcpage .searchbox.searchbox{
  margin:26px 22px 24px!important}
 html body .mobx.mobx.mobx > section.pbody.arcpage .achips.achips{
  padding:0 22px 10px!important;margin:0 0 24px!important}
 /* the categories scroll sideways, so they carry the site's own swipe cue -
    the same orange arrow the home rails use. It sits UNDER the categories, not
    on the head's label line: the search box stands between the two, and a cue
    two blocks away from the strip it describes points at nothing. */
 /* tighter rows */
 html body .mobx.mobx.mobx > section.pbody.arcpage .clist .crow.crow{
  /* only the padding: the row's own 12px gap is what keeps the title on the
     first line beside the dot - at 6 the title collapsed to zero width and
     wrapped one letter per line */
  padding:11px 22px!important}
 /* Show all is a pill on the right, the way the desktop sets it and the way
    Close list already sits */
 
}

/* tpq-archive-phone-3 */
/* 2026-09-18: categories first, then the swipe cue, then the search box - and
   no rule under the cue. Order only, done with flex on .awrap so the markup
   and the desktop are untouched. */
@media (max-width:760px){
 html body .mobx.mobx.mobx > section.pbody.arcpage.arcpage > .awrap{
  display:flex!important;flex-direction:column!important;align-items:stretch!important}
 html body .mobx.mobx.mobx > section.pbody.arcpage.arcpage > .awrap > .arc-hd{order:1!important}
 html body .mobx.mobx.mobx > section.pbody.arcpage.arcpage > .awrap > .achips{order:2!important}
 html body .mobx.mobx.mobx > section.pbody.arcpage.arcpage > .awrap > .aswipe{order:3!important}
 html body .mobx.mobx.mobx > section.pbody.arcpage.arcpage > .awrap > .searchbox{order:4!important}
 html body .mobx.mobx.mobx > section.pbody.arcpage.arcpage > .awrap > .clist{order:5!important}
 
 
 /* the air moves with them */
 html body .mobx.mobx.mobx > section.pbody.arcpage.arcpage > .awrap > .achips{
  margin:26px 0 0!important}
 html body .mobx.mobx.mobx > section.pbody.arcpage.arcpage > .awrap > .searchbox{
  margin:0 22px 24px!important}
 /* the rule under the swipe cue: that was .clist's own border-top */
 html body .mobx.mobx.mobx > section.pbody.arcpage.arcpage > .awrap > .clist{
  border-top:0!important}
}

/* tpq-archive-phone-4 */
/* 2026-09-18: the cue goes back on the head's label line. With the categories
   now sitting directly under the head it reads exactly the way the home rails
   do - grey label, orange arrow, and the strip it describes right beneath it.
   The head's own rule comes off with it. */
@media (max-width:760px){
 html body .mobx.mobx.mobx > section.pbody.arcpage .arc-hd .acount.acount::after{
  content:"  \2192  SWIPE"!important;display:inline!important;
  color:#876c22!important;font-weight:700!important;letter-spacing:1px!important}
 html body .mobx.mobx.mobx > section.pbody.arcpage .arc-hd.arc-hd::after{
  display:none!important;content:none!important}
}

/* tpq-archive-phone-5 */
/* 2026-09-18, the client's call: the search bar goes back ABOVE the categories,
   and every gap in the section is the same 24 - head, search, categories, list,
   and the air under Close list before the footer. */
@media (max-width:760px){
 html body .mobx.mobx.mobx > section.pbody.arcpage.arcpage > .awrap > .searchbox{
  order:2!important;margin:24px 22px 0!important}
 html body .mobx.mobx.mobx > section.pbody.arcpage.arcpage > .awrap > .achips{
  order:3!important;margin:24px 0 0!important;padding:0 22px!important}
 html body .mobx.mobx.mobx > section.pbody.arcpage.arcpage > .awrap > .clist{
  order:4!important;margin:24px 0 0!important}
 
 
 /* the head's own bottom padding was the odd one out at 18 */
 html body .mobx.mobx.mobx > section.pbody.arcpage .arc-hd.arc-hd{
  padding:0 22px!important}
 /* and the air under Close list matches the rest */
 html body .mobx.mobx.mobx > section.pbody.arcpage.arcpage.open{
  padding-bottom:24px!important}
}

/* tpq-featured-phone */
/* 2026-09-18: Get Featured on the phone, mirrored off Variety's own form pages
   (contact.html and onboard.html at 393x852, dpr 3), which read:
     section .fsec   padding 25px 22px 30px      (34px top where a rule sits above)
     form card       x22 w349, white, 1px rgb(229,224,213), radius 18
     fields          inset 23 inside the card
     label           700 9.5px/9.5px ls 1.8 uppercase rgb(125,122,116), mb 7
     input           48.4 high: font 16, padding 12/14, radius 12,
                     1px rgba(20,20,22,.11) on rgb(251,250,248), mb 14
     submit          a PILL on the RIGHT: 44 high, radius 99, 600 14px, pad 0 24
   The Position was running the sections at `24px 0` - no gutter at all, the card
   bleeding x1 to w391 - with 46-high fields at 15px and a full-width button.
   The 16px field size is also what stops iOS zooming the page on focus. */
@media (max-width:760px){
 html body .mobx.mobx.mobx > section.pbody.fsec-a.fsec-a{
  padding:25px 22px 30px!important}
 html body .mobx.mobx.mobx > section.pbody.fsec-b.fsec-b{
  padding:34px 22px 30px!important}
 html body .mobx.mobx.mobx > section.pbody .fbox.pwrap{
  padding:23px!important;border-radius:18px!important;
  border:1px solid rgb(229,224,213)!important;background:#fff!important}
 html body .mobx.mobx.mobx > section.pbody .fbox.pwrap label{
  display:block!important;
  font:700 9.5px/9.5px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;
  letter-spacing:1.8px!important;text-transform:uppercase!important;
  color:rgb(125,122,116)!important;margin:0 0 7px!important}
 html body .mobx.mobx.mobx > section.pbody .fbox.pwrap input,
 html body .mobx.mobx.mobx > section.pbody .fbox.pwrap select,
 html body .mobx.mobx.mobx > section.pbody .fbox.pwrap textarea{
  box-sizing:border-box!important;width:100%!important;
  /* a fixed height:46 was capping them; Variety's come to 48.4 from the padding */
  height:auto!important;min-height:0!important;
  /* Variety's 48.4 = 12 + 12 padding + 2 border + a 22.4 line box */
  font-size:16px!important;line-height:22.4px!important;
  padding:12px 14px!important;border-radius:12px!important;
  border:1px solid rgba(20,20,22,.11)!important;background:rgb(251,250,248)!important;
  margin:0 0 14px!important}
 html body .mobx.mobx.mobx > section.pbody .fbox.pwrap button[type="submit"],
 html body .mobx.mobx.mobx > section.pbody .fbox.pwrap button.fgo{
  display:block!important;box-sizing:border-box!important;
  width:-moz-fit-content!important;width:fit-content!important;
  height:44px!important;min-height:44px!important;
  margin:21px 0 0 auto!important;padding:0 24px!important;
  border-radius:99px!important;font:600 14px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important}
}

/* tpq-featured-accordion */
/* 2026-09-18: the card itself, copied from Variety's contact form at 393.
   MEASURED there: radius 20, padding 0, overflow hidden, white on a 1px #fff
   border with 0 16px 28px -8px rgba(20,20,22,.17); each .fgrp divided by
   1px rgba(20,20,22,.09) except the first; head 18 padding, min-height 44,
   label 700 10.5px/1 ls 1.9 uppercase #141416, the plus 17px rgb(201,195,183)
   turning 45deg and #c4ab67 when the group is open; body padding 0 18 with
   18 at the foot when open; Send is a pill on the right, 44 high. */
@media (max-width:760px){
 html body .mobx.mobx.mobx > section.pbody .fbox.pwrap{
  padding:0!important;overflow:hidden!important;border-radius:20px!important;
  background:#fff!important;border:1px solid #fff!important;
  box-shadow:0 16px 28px -8px rgba(20,20,22,.17)!important}
 html body .mobx.mobx.mobx > section.pbody .fbox.pwrap .fgrp{
  border-top:1px solid rgba(20,20,22,.09)!important}
 html body .mobx.mobx.mobx > section.pbody .fbox.pwrap .fgrp:first-child{border-top:0!important}
 html body .mobx.mobx.mobx > section.pbody .fbox.pwrap .fgrp > .ghead{
  display:flex!important;align-items:center!important;gap:11px!important;
  padding:18px!important;min-height:44px!important;cursor:pointer!important;
  -webkit-tap-highlight-color:transparent!important}
 html body .mobx.mobx.mobx > section.pbody .fbox.pwrap .fgrp > .ghead b{
  font:700 10.5px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;
  letter-spacing:1.9px!important;text-transform:uppercase!important;
  color:#141416!important;flex:1!important}
 html body .mobx.mobx.mobx > section.pbody .fbox.pwrap .fgrp > .ghead .cv{
  color:rgb(201,195,183)!important;font-size:17px!important;line-height:1!important;
  transition:transform .22s,color .22s!important}
 html body .mobx.mobx.mobx > section.pbody .fbox.pwrap .fgrp.open > .ghead .cv{
  transform:rotate(45deg)!important;color:#876c22!important}
 html body .mobx.mobx.mobx > section.pbody .fbox.pwrap .fgrp > .gbody{
  max-height:0!important;overflow:hidden!important;padding:0 18px!important;
  transition:max-height .3s ease!important}
 html body .mobx.mobx.mobx > section.pbody .fbox.pwrap .fgrp.open > .gbody{
  max-height:900px!important;padding-bottom:18px!important}
 html body .mobx.mobx.mobx > section.pbody .fbox.pwrap button[type="submit"]{
  margin:0 18px 18px auto!important}
}

/* tpq-featured-rail */
/* 2026-09-18, MEASURED, not guessed. Variety's onboarding page and The
   Position's own home shelf agree on the rail, to the pixel:
     rail    x0 w393, padding 14px 22px 18px, gap 14, cards 279.19 wide
     dots    6 high, gap 6, margin-top 12
   The onboarding STEP CARD, measured at 393 x 852 dpr 3:
     card    padding 22, radius 18, 1px rgb(229,224,213),
             shadow 0 4px 12px rgba(20,20,22,.06)
     number  700 12px/12px  ls -0.24  Iowan Old Style  rgb(196,171,103)  mb 6
     title   600 20px/22px  ls -0.3   Iowan Old Style  rgb(20,20,22)   m 2 0 3
     body    400 13.5px/22.275px      -apple-system    rgb(74,74,82)   mt 6
     section padding 25px 22px 34px, the rail bleeding on margin 0 -22px
   The Position was stacking the four formats as full-height cards: 2,459px of
   page against Variety's 1,311. */
@media (max-width:760px){
 html body .mobx.mobx.mobx > section.pbody.fsec-a.fsec-a{
  padding:25px 22px 34px!important}
 html body .mobx.mobx.mobx > section.pbody.fsec-a .arc-hd.arc-hd{
  padding:0!important}
 html body .mobx.mobx.mobx > section.pbody.fsec-a ol.fcards.fcards{
  display:flex!important;flex-wrap:nowrap!important;
  overflow-x:auto!important;overflow-y:visible!important;
  scroll-snap-type:x mandatory!important;scrollbar-width:none!important;
  -webkit-overflow-scrolling:touch!important;
  gap:14px!important;margin:0 -22px!important;padding:14px 22px 18px!important;
  list-style:none!important}
 html body .mobx.mobx.mobx > section.pbody.fsec-a ol.fcards.fcards::-webkit-scrollbar{display:none!important}
 html body .mobx.mobx.mobx > section.pbody.fsec-a ol.fcards > li{
  flex:0 0 279.19px!important;width:279.19px!important;max-width:279.19px!important;min-width:0!important;
  scroll-snap-align:center!important;margin:0!important;
  display:block!important;box-sizing:border-box!important;
  background:#fff!important;border:1px solid rgb(229,224,213)!important;
  border-radius:18px!important;box-shadow:0 4px 12px rgba(20,20,22,.06)!important;
  padding:22px!important}
 html body .mobx.mobx.mobx > section.pbody.fsec-a ol.fcards > li .fn{
  display:block!important;
  font:700 12px/12px "Iowan Old Style",Palatino,Georgia,Cambria,serif!important;
  letter-spacing:-0.24px!important;text-transform:none!important;
  color:#876c22!important;margin:0 0 6px!important}
 html body .mobx.mobx.mobx > section.pbody.fsec-a ol.fcards > li .ft{display:block!important}
 html body .mobx.mobx.mobx > section.pbody.fsec-a ol.fcards > li .ft b{
  display:block!important;
  font:600 20px/22px "Iowan Old Style",Palatino,Georgia,Cambria,serif!important;
  letter-spacing:-0.3px!important;color:rgb(20,20,22)!important;margin:2px 0 3px!important}
 html body .mobx.mobx.mobx > section.pbody.fsec-a ol.fcards > li .ft i{
  display:block!important;font-style:normal!important;
  font:400 13.5px/22.275px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;
  color:rgb(74,74,82)!important;margin:6px 0 0!important}
}

/* tpq-featured-head-and-card */
/* 2026-09-18, from the client's own iPhone shots of Variety's onboarding page:
   no rule under the section head, the count stacked under the title with the
   orange swipe cue, and the form's groups all shut with the pill in a row of
   its own under a hairline. */
@media (max-width:760px){
 /* the head carries no rule - Variety's does not */
 html body .mobx.mobx.mobx > section.pbody.fsec-a .arc-hd.arc-hd::after,
 html body .mobx.mobx.mobx > section.pbody.fsec-b .arc-hd.arc-hd::after{
  display:none!important;content:none!important}
 /* the head is a grid on the desktop, which floated the count up beside the
    eyebrow. On the phone it stacks: eyebrow, title, then the count. */
 html body .mobx.mobx.mobx > section.pbody .arc-hd.arc-hd{
  display:block!important}
 html body .mobx.mobx.mobx > section.pbody .arc-hd .arc-eyebrow{
  display:block!important;position:static!important;float:none!important;width:auto!important;
  margin:0!important}
 html body .mobx.mobx.mobx > section.pbody .arc-hd h2{
  display:block!important;margin:6.27px 0 0!important}
 /* eyebrow, title, then the count on its own line with the swipe cue -
    "4 STEPS -> SWIPE" is exactly how the onboarding page reads */
 html body .mobx.mobx.mobx > section.pbody .arc-hd .acount.acount{
  display:block!important;position:static!important;float:none!important;
  width:auto!important;text-align:left!important;margin:13.15px 0 0!important;padding:0!important;
  font:400 11px/18.15px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;
  letter-spacing:1px!important;text-transform:uppercase!important;color:rgb(154,148,136)!important}
 html body .mobx.mobx.mobx > section.pbody.fsec-a .arc-hd .acount.acount::after{
  content:"  \2192  SWIPE"!important;display:inline!important;
  color:#876c22!important;font-weight:700!important;letter-spacing:1px!important}
 /* 2026-10-18 the intake form opens group by group, so its label ends the same way with EXPAND (as on Variety's forms) */
 html body .mobx.mobx.mobx > section.pbody.fsec-b .arc-hd .acount.acount::after{
  content:"  \2192  EXPAND"!important;display:inline!important;
  color:#876c22!important;font-weight:700!important;letter-spacing:1px!important}
 /* the submit sits in its own row under a hairline, like Variety's */
 html body .mobx.mobx.mobx > section.pbody .fbox.pwrap .gfoot{
  display:flex!important;justify-content:flex-end!important;
  border-top:1px solid rgba(20,20,22,.09)!important;padding:18px!important;margin:0!important}
 html body .mobx.mobx.mobx > section.pbody .fbox.pwrap .gfoot button[type="submit"]{
  margin:0!important;padding:0 24px!important;width:auto!important}
}
/* 2026-09-18: 46 of air between the head and the form card against the
   desktop's 26 - the head carried 18 of padding and 20 of margin under a rule
   that is no longer drawn here. The card's own 26 is the gap now. */
@media (max-width:760px){
 html body .mobx.mobx.mobx > section.pbody.fsec-b .arc-hd.arc-hd{
  padding-bottom:0!important;margin-bottom:0!important}
}

/* tpq-puzzles-phone */
/* 2026-09-18: nothing to write here. The Puzzles page already runs the same
   format as Get Featured - head stacked with the orange swipe cue, no rule
   under it, a bleeding rail of 279.2 cards at radius 18 with gap 14, and the
   dot row under it. Its section padding reads 26 / 24 against Get Featured's
   25 / 34 because TPSECFIT writes it INLINE with !important:
     style="padding-top:26px!important;padding-bottom:24px!important"
   on the section and padding-top:0!important on the rail. That is the section
   solver's own answer, the same one the home shelf gets, and no stylesheet can
   or should override it. A block that tried to was removed rather than left
   here doing nothing. */

/* tpq-puzzles-carousel */
/* 2026-09-18: the carousel stays - the client wants the CARD SIZE from
   Variety's portfolio scene ON MOBILE, not the desktop's stacked tiles.
   MEASURED on varietypartners.com/work at 393x852 dpr 3, with a case open:
     rail  .car    x23 w347, padding 0 19px 14px, gap 12
     card  .wshot  241 x 180.8, radius 12
   The Position's puzzle cards were 279.2 x 278.6 with a gap of 14.
   A stacked-tile version of this was built and removed: he wants the swipe. */
@media (max-width:760px){
 html body .mobx.mobx.mobx > section.tpgh.vpban ~ section.tpgames .tpg-grid.tpg-grid.tpg-grid{
  gap:12px!important}
 html body .mobx.mobx.mobx > section.tpgh.vpban ~ section.tpgames .tpg-grid > a.tpg-item.tpg-item.tpg-item{
  flex:0 0 241px!important;width:241px!important;
  max-width:241px!important;min-width:241px!important;
  padding:14px 14px 12px!important;gap:10px!important}
 /* the mark tile is what made the card 297.8 - Variety's portfolio card is
    180.8 all in, and a photo carries no name or line under it */
 html body .mobx.mobx.mobx > section.tpgh.vpban ~ section.tpgames.tpgames.tpgames .tpg-grid.tpg-grid a.tpg-item.tpg-item.tpg-item .tpg-art.tpg-art.tpg-art{
  height:84px!important;min-height:84px!important;max-height:84px!important;
  padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important;
  border-radius:12px!important;overflow:hidden!important}
 html body .mobx.mobx.mobx > section.tpgh.vpban ~ section.tpgames.tpgames.tpgames .tpg-grid.tpg-grid a.tpg-item.tpg-item.tpg-item .tpg-art.tpg-art.tpg-art svg{
  width:56px!important;height:56px!important;max-width:56px!important;max-height:56px!important;
  min-width:0!important;min-height:0!important;display:block!important}
 html body .mobx.mobx.mobx > section.tpgh.vpban ~ section.tpgames .tpg-item .tpg-n.tpg-n{
  margin:10px 0 0!important;font-size:17px!important;line-height:18.7px!important}
 html body .mobx.mobx.mobx > section.tpgh.vpban ~ section.tpgames .tpg-item .tpg-d.tpg-d{
  margin:4px 0 0!important;font-size:12.5px!important;line-height:17.5px!important;
  display:-webkit-box!important;-webkit-line-clamp:1!important;-webkit-box-orient:vertical!important;
  overflow:hidden!important}
 /* PLAY is a pseudo on the card; it carried 14 of air it does not need here */
 html body .mobx.mobx.mobx > section.tpgh.vpban ~ section.tpgames .tpg-grid a.tpg-item.tpg-item.tpg-item::after,
 html body .mobx.mobx.mobx > section.tpgh.vpban ~ section.tpgames .tpg-grid a.tpg-item.tpg-item.tpg-item .tpg-n::after{
  margin-top:8px!important}
}


/* tpq-bee-phone */
/* 2026-09-18: "BEGINNER   0" read as two unrelated things - the label is
   700 11px uppercase and the score was 700 17px Iowan beside it, with the
   progress track between them almost invisible at rgba(20,20,22,.1).
   One row, one size, and a track you can see. */
@media (max-width:760px){
 html body .tpg-card .tpb-rank.tpb-rank{
  /* the row was shrink-to-fit, so the progress track resolved to 0 wide and
     the label and the score sat next to each other with a hole between them */
  width:100%!important;gap:12px!important}
 html body .tpg-card .tpb-rank .tpb-name.tpb-name{min-width:0!important}
 html body .tpg-card .tpb-rank .tpb-pts.tpb-pts{
  font:700 11px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif!important;
  letter-spacing:1.6px!important;color:#141416!important;min-width:22px!important}
 html body .tpg-card .tpb-rank .tpb-bar.tpb-bar{
  height:4px!important;background:rgba(20,20,22,.16)!important}
 /* the hint is one line now, and reads as a caption rather than a sentence */
 html body .tpg-card .tpb-left.tpb-left{
  margin:16px 0 0!important;text-align:center!important;
  font:400 12px/1.5 "Iowan Old Style",Georgia,serif!important;color:#6b665e!important}
}

/* tpq-mini-foot */
/* 2026-09-18: "Puzzle 1 of 3" was printed twice - once in the head row and
   again in a footer row carrying a divider, 38 of margin and 20 of padding.
   The footer row is dropped while it holds nothing but that count, which takes
   58.2 of dead space and the stray rule out of the card. It comes straight back
   when a puzzle is finished and the next-puzzle button is put into it, so the
   rule and the air return exactly where they were. */


/* tpq-hud-phone */
/* 2026-09-18: `.tpg-card.tpg-framed [class$="-hud"] > * + *` drew a
   1px rgba(20,20,22,.45) vertical rule between every hud item, with no padding
   either side, so it read as a stray bar jammed against LETTERS LEFT and
   LEFT 7. The rule is off and the items are spaced instead. */
@media (max-width:760px){
 html body .tpg-card.tpg-framed [class$="-hud"] > * + *{
  border-left:0!important;margin-left:0!important}
 html body .tpg-card.tpg-framed [class$="-hud"]{gap:18px!important}
 html body .tpg-card [class$="-hud"].tpc2-hud,
 html body .tpg-card [class$="-hud"].tpp-hud,
 html body .tpg-card [class$="-hud"].tpm-hud,
 html body .tpg-card [class$="-hud"].tps-hud{gap:18px!important}
}

/* tpq-chain-tut */
/* 2026-09-18: Letter Chain's How-to-play pane measured 692 high against
   Word Groups' 605.5, Mini Crossword's 631.7 and Memory Match's 421.1 - the
   tallest of the eight, because its demo ring is 200 x 200 with 6 above and a
   26 gap under it. The ring comes down to 150 and the air with it, which puts
   the pane in line with the rest. Nothing about the played board changes. */
@media (max-width:760px){
 html body .tpsh .tpsh-tut .tpsh-demo .tpsh-sides{
  width:150px!important;height:150px!important;
  margin-top:2px!important;margin-left:auto!important;margin-right:auto!important}
 html body .tpsh .tpsh-tut .tpsh-demo .tpsh-sides > *{transform:scale(.75)!important}
 html body .tpsh .tpsh-tut .tpsh-demo .tpsh-word{margin-bottom:8px!important}
 html body .tpsh .tpsh-tut .tpsh-demo .tpsh-fb{margin-top:16px!important}
}

/* tpq-chain-hud-stack */
/* 2026-09-18: same wording, stacked - Words on its own line with Letters left
   underneath, rather than the two running across one row. */
@media (max-width:760px){
 html body .tpg-card.tpg-framed .tpc2-hud.tpc2-hud,
 html body .tpg-card .tpc2-hud.tpc2-hud{
  display:flex!important;flex-direction:column!important;
  align-items:center!important;justify-content:center!important;
  /* the two lines were 5 apart at 10px type, which read as one clump, and the
     block sat 25 under the head rule against 28.5 down to the board. 8 between
     the lines and the block centred in its own air. */
  gap:8px!important;margin:4px 0 10px!important;text-align:center!important}
}

/* tpq-memory-phone */
/* 2026-09-18, measured:
   - the How-to-play demo cards were rgb(231,221,205), a warm tan that appears
     nowhere else. Word Groups' demo tiles are white and every board cell on the
     site is rgb(239,236,231). The tan is the odd one out, so it goes.
   - the board laid 16 cards into THREE columns, which is six rows with the last
     one holding a single card and two empty cells - that pale block at the foot
     was the grid showing through. Four columns is four full rows, nothing
     empty, and the board comes down from 503.2 high, which is what pushed the
     time and the counters off the bottom of the phone. */
@media (max-width:760px){
 html body .tpsh .tpsh-demo .tpsh-card{
  background:rgb(239,236,231)!important}
 html body #tpmemwrap .tpm-board.tpm-board{
  grid-template-columns:repeat(4,1fr)!important;gap:6px!important}
 html body #tpmemwrap .tpm-board .tpm-c{
  aspect-ratio:1/1!important;height:auto!important;min-height:0!important}
}


/* tpq-featured-gap-phone */
/* 2026-09-18: the form card sat 26 under the head and 30 above the section's end
   line - the card read as leaning up, the same fault the desktop had at 26/62. The
   section's bottom is 30 here, so the air above the card comes up to 30 to match it.
   Written in the sheet, not inline: mobile.js wipes inline margin-top inside a band. */
@media (max-width:760px){
 html body .mobx.mobx.mobx > section.pbody.fsec-b .fbox.pwrap{
  margin-top:30px!important}
}

/* tpq-home-shelf-matches-puzzles-2026-09-19 */
/* The four puzzles on the home page were still on the OLD phone card - 279.2 x
   278.6 with 18 of padding, a 14 gap and a 4px mark tile - while the Puzzles
   page had been moved onto Variety's portfolio card: 241 wide, 14/14/12, gap 12,
   an 84 tile at radius 12. Same rail, two different cards. The Puzzles page is
   the one that was signed off, so the home shelf takes its numbers exactly; the
   block below is tpq-puzzles-carousel re-aimed at the home shelf. */
@media (max-width:760px){
 html body .mobx.mobx.mobx section.tpgames[data-shelf="home"] .tpg-grid.tpg-grid.tpg-grid{
  gap:12px!important}
 html body .mobx.mobx.mobx section.tpgames[data-shelf="home"] .tpg-grid > a.tpg-item.tpg-item.tpg-item{
  flex:0 0 241px!important;width:241px!important;
  max-width:241px!important;min-width:241px!important;
  padding:14px 14px 12px!important;gap:10px!important}
 html body .mobx.mobx.mobx section.tpgames.tpgames.tpgames[data-shelf="home"] .tpg-grid.tpg-grid a.tpg-item.tpg-item.tpg-item .tpg-art.tpg-art.tpg-art{
  height:84px!important;min-height:84px!important;max-height:84px!important;
  padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important;
  border-radius:12px!important;overflow:hidden!important}
 html body .mobx.mobx.mobx section.tpgames.tpgames.tpgames[data-shelf="home"] .tpg-grid.tpg-grid a.tpg-item.tpg-item.tpg-item .tpg-art.tpg-art.tpg-art svg{
  width:56px!important;height:56px!important;max-width:56px!important;max-height:56px!important;
  min-width:0!important;min-height:0!important;display:block!important}
 html body .mobx.mobx.mobx section.tpgames[data-shelf="home"] .tpg-item .tpg-n.tpg-n{
  margin:10px 0 0!important;font-size:17px!important;line-height:18.7px!important}
 html body .mobx.mobx.mobx section.tpgames[data-shelf="home"] .tpg-item .tpg-d.tpg-d{
  margin:4px 0 0!important;font-size:12.5px!important;line-height:17.5px!important;
  display:-webkit-box!important;-webkit-line-clamp:1!important;-webkit-box-orient:vertical!important;
  overflow:hidden!important}
 html body .mobx.mobx.mobx section.tpgames[data-shelf="home"] .tpg-grid a.tpg-item.tpg-item.tpg-item::after,
 html body .mobx.mobx.mobx section.tpgames[data-shelf="home"] .tpg-grid a.tpg-item.tpg-item.tpg-item .tpg-n::after{
  margin-top:8px!important}
}
/* the name and the line under it carry their own home-shelf rules further up
   the sheet - 16 and 6 against the Puzzles page's 10 and 4 - which is the last
   8 of difference between the two cards */
@media (max-width:760px){
 html body .mobx.mobx.mobx section.tpgames.tpgames[data-shelf="home"] .tpg-grid.tpg-grid a.tpg-item.tpg-item .tpg-n.tpg-n.tpg-n{
  margin:10px 0 0!important}
 html body .mobx.mobx.mobx section.tpgames.tpgames[data-shelf="home"] .tpg-grid.tpg-grid a.tpg-item.tpg-item .tpg-d.tpg-d.tpg-d{
  margin:4px 0 0!important}
}


/* 2026-09-22: article title on the phone takes the archive/puzzles/featured page-title size (28/31.92, ls -0.21) */
@media(max-width:760px){.mobx.mobx div.art.art.art h1{font-size:28px!important;line-height:31.92px!important;letter-spacing:-0.21px!important}}

/* 2026-09-22: phone — the article masthead and the Get Featured form section take the same first-line / last-line air as every other banner and section (72.8 / 77.6 and 28) */
@media(max-width:760px){.mobx.mobx > div.art.art.art{padding-top:70.8px!important;padding-bottom:76.6px!important}
html body .mobx.mobx.mobx.mobx > section.pbody.fsec-b.fsec-b.fsec-b{padding-top:24px!important}}

/* 2026-09-22: phone article banner holds the same 317 as the tab banners — the summary drops to 14.5/21 and the byline lives under the picture rule */
@media(max-width:760px){html body div.mobx.mobx.mobx.mobx.mobx > div.art.art p.dek.dek{font-size:14.5px!important;line-height:21px!important;margin-top:12px!important}
html body div.mobx.mobx.mobx.mobx.mobx > div.art.art{min-height:317px!important;box-sizing:border-box!important}}

/* 2026-09-22: on the phone the summary leaves the banner (the band holds only crumb + title, 317 like the tabs) and sits under it, above the picture */
@media(max-width:760px){html body div.mobx.mobx.mobx.mobx.mobx > div.art.art p.dek.dek{display:none!important}
html body div.mobx.mobx.mobx.mobx.mobx > .dek-m{display:block!important;padding:25px 22px 0!important;background:#fff!important}
html body div.mobx.mobx.mobx.mobx.mobx > .dek-m p.dek{display:block!important;margin:0!important;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;font-size:17px!important;line-height:26px!important;font-weight:400!important;color:#141416!important}
html body div.mobx.mobx.mobx.mobx.mobx > div.art.art{height:317px!important;min-height:317px!important;padding-bottom:0!important}
html body div.mobx.mobx.mobx.mobx.mobx > .abody.abody{padding-top:24px!important}}
@media(min-width:761px){html body div.mobx.mobx.mobx.mobx.mobx > .dek-m{display:none!important}}

/* 2026-09-22: one line under the phone header, not two. `.nav` carried its own 1px at a half-pixel offset from the header's, which iOS renders as a doubled/fuzzy line. The closed menu's drop shadow also bled under it. */
@media(max-width:760px){html body .mobx.mobx.mobx header .nav.nav{border-bottom:0!important;background:transparent!important}
html body .mobx.mobx.mobx > .mmenu:not(.open):not(.on):not([aria-expanded="true"]){box-shadow:none!important}}

/* 2026-09-22 — the strip above the header, solved.
   iOS 26 Safari tints each bar from the first FIXED/STICKY element 8px inside that edge,
   reading its plain background-color. The phone header is that element. Variety's header is
   cream and its strip is cream; The Position's header was pure #ffffff, which Safari treats as
   "no tint" and falls back to its own chrome (black on a dark canvas). One step off pure white
   is a real colour to WebKit and is what the strip then carries. #fefefe is 1/255 from white. */
@media(max-width:760px){
 html body div.mobx.mobx.mobx.mobx > header,
 html body div.mobx.mobx.mobx.mobx > header.hd{background:#fefefe!important;background-color:#fefefe!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
 html body div.mobx.mobx.mobx.mobx > header .nav{background:transparent!important;background-color:transparent!important}
}

/* tp-preview-weight-2026-09-22
   The card mark is the same SVG the shell clones into "How to play" - there it
   is drawn at 78px with a 4.4px line (5.6% of the box), and the desktop card
   draws it at 104px with 6px (5.8%). The stroke is non-scaling, so the phone
   kept the full 6px on a 56px mark: 10.7%, nearly double. Letter Chain's beads
   are 7.5px across sitting on a 6px line, so they swell into one lumpy chain -
   that is the "pixelated" read. Same mark, same ratio, at the phone's size. */
@media(max-width:760px){
 html body .mobx.mobx.mobx.mobx .tpg-item.tpg-item.tpg-item .tpg-art.tpg-art.tpg-art svg .mk,
 html body .mobx.mobx.mobx.mobx .tpg-item.tpg-item.tpg-item .tpg-art.tpg-art.tpg-art svg .pth2{
  stroke-width:3.23px!important}
}