/* ==========================================================================
   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:900px){

/* --------------------------------------------------------------- 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:#fd5934!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:#fd5934!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:#fd5934!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:#fd5934!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:#fd5934!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}
.mobx section.tpgames:not([data-shelf]) .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:not([data-shelf]) .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:#fd5934!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:#fd5934!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:#fd5934!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 calc(31.5px + env(safe-area-inset-bottom,0px))!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 (~34) and this page's canvas is white, so the inset is
    ADDED here - the footer paints that strip itself and the ink air does not move. */
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(253,89,52)
     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(140,130,113), 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(140,130,113)!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:rgb(253,89,52)!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:rgb(253,89,52)!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. */
.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(140,130,113)!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 img.hero{margin-top:13.4px!important;margin-bottom:0!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(100vh - 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(253,89,52)!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 */
/* Variety's header goes TRANSPARENT over the open panel and drops its hairline -
   it does not paint its own dark ground. Measured: rgba(0,0,0,0), border 0, z 90. */
.mobx.mobx.mobx > header:has(~ .mmenu.open){
 position:relative!important;z-index:90!important;
 background:transparent!important;border-bottom:0!important;box-shadow:none!important}
.mobx.mobx.mobx > header:has(~ .mmenu.open) .brand{color:#fff!important;font-size:0!important}
.mobx.mobx.mobx > header:has(~ .mmenu.open) .brand::after{
 content:"Menu"!important;font:400 20px/1.2 "Iowan Old Style",Georgia,serif!important;
 letter-spacing:-.2px!important;color:#fff!important}
.mobx.mobx.mobx > header:has(~ .mmenu.open) .burger,
.mobx.mobx.mobx > header:has(~ .mmenu.open) .bg{color:#fff!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}
.mobx.mobx.mobx > header:has(~ .mmenu.open) .ic{
 color:#fff!important;border:1px solid rgba(255,255,255,.3)!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:900px){
/* 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 #fd5934!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 img.hero{
 width:349px!important;max-width:349px!important;height:auto!important;
 margin:12.7px 0 0!important}
.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}
}